Question

我正在使用我发现的脚本在我的表中搜索并仅显示包含与搜索输入字段中的文本匹配的行的行。

      $("#searchfahrzeuge").keyup(function(){

      $("#fahrzeugliste").find("tr").hide();
      var data = this.value.split(" ");
      var jo = $("#fahrzeugliste").find("tr");


      $.each(data, function(i, v){
          jo = jo.filter("*:containsIgnoreCase('"+v+"')");
        console.log(jo);
      });

      jo.show(); });

但是现在我要排除表的两列，它们都有一个类“.nosearch”，但我不知道怎么做......

我试过了：

var jo = $("#fahrzeugliste").find("tr:not(.nosearch)");

以及过滤功能：

jo = jo.filter("*:not(.nosearch):containsIgnoreCase('"+v+"')");

但两者都不起作用。

Answer 1

您没有提供您的HTML，但我认为该课程在td上。这是您的问题，过滤都是在tr级别完成的，因此:not适用于没有该类的tr。

我会将其更改为过滤td而不是tr元素。像这样（未经测试）：

  var jo = $("#fahrzeugliste").find("tr > td");

  $.each(data, function(i, v){
      jo = jo.filter(":not(.nosearch):containsIgnoreCase('"+v+"')");
  });

  jo.parent().show(); // show the tr's for all matched tds

Answer 2

您可以随时运行现有的搜索，然后只需使用

$('.nosearch').hide();

之后，而不是试图让你的查询过于复杂。

Answer 3

过滤器的自定义功能

怎么样？

var jo = $("#fahrzeugliste tr")
.filter(":containsIgnoreCase('"+v+"')")
.filter(function(i){
    if(!$(this).children('td').hasClass('nosearch'))
    return $(this);
});

Like this one。当你真的需要行时可能会有用。

Answer 4

试试这个。我刚才遇到了类似的问题。这是我可以解决的问题。它并不那么花哨但它有效。

<input id="searchfahrzeuge" placeholder="Search for" >

<table id='fahrzeugliste'>

       <tr><th>First Name</th><th>Last Name</th><th>Email</th></tr>

    <tbody>

       <tr><td>Adykn</td><td>Lovejoy</td><td class='nosearch'>Me@lovejoy.com</td></tr>

       <tr><td>Adam</td><td>Smith</td><td class='nosearch'>Adam@lovejoy.com</td></tr>

       <tr><td>Joe</td><td>Eddie</td><td class='nosearch'>Eddie@lovejoy.com</td></tr>

    </tbody>  

</table>

<script> 
  $(document).ready(function () {
                       $('#searchfahrzeuge').keyup(function() {
                        var that = this;

                        var tableBody = $('#fahrzeugliste tbody');
                        var tr = $('#fahrzeugliste tbody tr');
                        $('.search-sf').remove();
                        $("#fahrzeugliste tr td:not(.nosearch)").each(function (i,val) {
                            var tableRowsClass = $(this).closest('tr');


                            var rowText = $(val).text().toLowerCase();
                            var inputText = $(that).val().toLowerCase();

                            if (inputText !== '') {
                                $('.search-query-sf').remove();
                                tableBody.prepend('<tr class="search-query-sf"><td colspan="3"><strong>Searching for: "' +$(that).val() +'"</strong></td></tr>');
                            } else {
                                $('.search-query-sf').remove();
                            }

                            if (rowText.indexOf(inputText) === -1) {
                                tableRowsClass.hide();
                            } else {
                                $('.search-sf').remove();
                                $('.dtrc').hide();
                                tableRowsClass.show();
                            }
                        });

                        if (tr.children(':visible').length === 0) {
                            tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="3">No entries found.</td></tr>');
                        }
                    });
                });
</script>

jquery过滤表但排除一列

4 个答案: