jQuery中的过滤器表?或角度JS

Filter table in jQuery? or angularJS

本文关键字：JS 过滤器 jQuery      更新时间：2023-09-26

我希望能够过滤我的表，表是这样的

name   |    date     |   agencyID
test      2016-03-17     91282774
test      2016-03-18     27496321

我希望能够有一个包含所有"agencyID"的下拉列表，当我选择它时，它只显示带有此机构ID的表格行。我有一个类似的东西，您可以在输入类型文本中搜索任何内容。

这就是该部分的工作方式，是否有任何类似的方法可以通过选择下拉列表执行此操作？

(function ($) {
    $('#filter').keyup(function () {
        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();
    })
}(jQuery));

如果这是一个更好的选择，我愿意实现 angularJS

您可以在选择下拉列表中执行更改处理程序。

.html：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<select id="filter">
  <option value="">Choose a filter</option>
  <option value="1231423424">1231423424</option>
  <option value="456456e54">456456e54</option>
  <option value="123488745">123488745</option>
</select>
<table id="searchable">
  <tr>
    <th>name</th>
    <th>date</th>
    <th>agencyID</th>
  </tr>
  <tr>
    <td>test 1</td>
    <td>date 1</td>
    <td>1231423424</td>
  </tr>
  <tr>
    <td>test 2</td>
    <td>date 2</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 3</td>
    <td>date 3</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 4</td>
    <td>date 4</td>
    <td>123488745</td>
  </tr>
  <tr>
    <td>test 5</td>
    <td>date 5</td>
    <td>123488745</td>
  </tr>
</table>

Javascript：

$(document).ready(function(){
    $('#filter').change(function(){
    var filterValue = $(this).val();
    if(filterValue==""){
        $("#searchable tr").show();
    } else{
      $("#searchable tr").hide();
      $("#searchable td:nth-child(3)").each(function(){
        if( $(this).text() == filterValue){
          $(this).parent().show();
        }
      });
    }
  });
});

在小提琴中看到它

这是使用 ：contains（） 选择器的另一个实现

$select.on('change', function(){
    $('.highlight').removeClass('highlight');
    var id = $(this).val();
    $('table').find("tr:contains('"+id+"')").addClass('highlight');
  });

在这里摆弄

您可以向 tr 添加一个作为代理机构的 ID

<select id="select">
<option value=""></option>
<option value="91282774">91282774</option>
<option value="27496321">27496321</option>
</select>
<table id="mytable">
<tr><th>name</th><th>data</th><th>agency</th></tr>
<tr id="91282774"><td>test</td><td>2016-03-17</td><td>91282774</td></tr>
<tr id="27496321"><td>test</td><td>2016-03-18</td><td>27496321</td></tr>
</table>

并在更改选择时搜索 ID

$(document).ready(function(){
  $("#select").change(function(){
    var value = $(this).val();
    if(value == "")
        $("#mytable tr").show();
    else{
        $("#mytable tr[id=" + value + "]").show();
        $("#mytable tr[id][id!=" + value + "]").hide();
    }
  });
});

小提琴

相关文章：