jquery过滤表但排除一列答案

【问题标题】：jquery filter table but exclude one columnjquery过滤表但排除一列
【发布时间】：2012-04-15 01:17:31
【问题描述】：

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

      $("#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+"')");

但两者都不起作用。

【问题讨论】：

标签： jquery search filter

【解决方案1】：

试试这个。不久前我遇到了类似的问题。这是我能解决的问题。它不是那么花哨，但它确实有效。

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

【讨论】：

【解决方案2】：

过滤器的自定义函数怎么样

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

Like this one。当您确实需要行时可能会很有用。

【讨论】：

【解决方案3】：

您没有提供您的 html，但我认为该课程在 td 上。这是你的问题，过滤都是在tr 级别完成的，所以:not 应用于tr，它没有类。

我会将其更改为过滤 tds 而不是 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

【讨论】：

【解决方案4】：

你总是可以运行你现在的搜索，然后使用

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

之后，不要试图让您的查询过于复杂。

【讨论】：

这会隐藏单个单元格，这只会造成混乱。
对不起，你说“排除 2 列表格，他们有展位有一个类“.nosearch””，所以也许我很困惑，TD 或 TR 有这个类吗?
他没有包含 html 但trs 是行，而不是列。