java - 使用 jquery 根据 td 文本过滤不同的行？

Question

我的 jsp 中有一个循环，如下所示:

<table>
  <tr>
   <th>Region</th>
   <th>Locations</th>
  </tr>
   <c:forEach var="LocationBean" items="${list}">
    <tr>
    <td>${LocationBean.region_name}</td>
    <td>${LocationBean.location_name}</td>
 </tr>
    </c:forEach>
</table>

给出的结果是这样的:

我只需要获取不同的区域名称，我对 jquery 非常基础。

Answer 1

您必须为表分配一个id，例如mytable，然后使用jquery过滤方法

var uniqueItems = [];
$("#btn").on('click', function() {
  $("#list td")
    .filter(function(index, element) {
      if ($.inArray($(element).text(), uniqueItems) === -1) {
        uniqueItems.push($(element).text());
      } else {
        $(element).parent().remove();
      }

    });
  uniqueItems = [];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a href="#." class="btn btn-success" id="btn">Filter duplicate</a>
<table id="list" class="table">
  <tr>
    <th>Region</th>
    <th>Locations</th>
  </tr>
  <tr>
    <td>EAST</td>
    <td>loc1</td>
  </tr>
  <tr>
    <td>EAST</td>
    <td>loc1</td>
  </tr>
  <tr>
    <td>North</td>
    <td>loc2</td>
  </tr>
  <tr>
    <td>West</td>
    <td>loc3</td>
  </tr>
</table>