javascript - 使用 Javascript 实现过滤功能

Question

我想为我的网络表格实现过滤功能。根据下拉列表选择，表格必须显示相应的数据。例如:下拉列表包含两个数据:是，否。

如果用户选择"is"，则应显示下表:

S.NO ||姓名||成员0101 ||彼得·乔什 ||是的

如果用户从下拉列表中选择“否”，则应显示如下:

S.NO ||姓名||成员0101 ||黛比||否

"is"和“否”应与“成员”列映射。如果值存在，它应该显示表中的相应行。

请帮助我实现这一点。

由于网络表是动态的，因此它可能包含 100 个"is"或“否”。根据下拉列表，它应该返回表中正确的行。

希望该小组中的某个人能提供一些意见。

Answer 1

JQuery 比 Javascript 更容易解决这个问题。

$('select').change(function() {
  $.each($('table tr td:nth-child(5)'), function(index, value) {
    if ($('select').val() == 'all') {
      $(value).closest('tr').show();
    } else if ($(value).text().toLowerCase().trim() ==
      $('select').val().toLowerCase().trim()) {
      $(value).closest('tr').show();
    } else {
      $(value).closest('tr').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="all">All</option>
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>
<br />
<table style="width:100%">
  <tbody>
    <tr>
      <th>Number</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Yes/No</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>No</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>No</td>
    </tr>
  </tbody>
</table>

希望这有帮助。