Question

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

如果用户选择＆＃34;是＆＃34;那么它应该显示下表：

S.NO ||名字||会员 0101 ||彼得乔希||是

如果用户选择＆＃34;否＆＃34;从下拉列表显示如下：

S.NO ||名字||会员 0101 || Debiee ||否

是，否则应与成员列映射。如果值存在则应在表中显示相应的行。

请帮我实现这个。

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

希望期待这个群体中某些人的一些意见。

Answer 1

JQuery比Javascript更容易解决它。

＆＃13;

$('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();
    }
  });
});

＆＃13;

<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>

＆＃13;

希望得到这个帮助。

使用Javascript实现过滤功能

1 个答案: