根据多列中的值显示行。 jQuery答案

【问题标题】：Show Rows based on values in multiple columns. JQuery根据多列中的值显示行。 jQuery
【发布时间】：2010-11-17 16:00:55
【问题描述】：

在 JQuery 中，使用以下代码很容易根据预定义的列 td 值隐藏表行。

function filterRows(word){
$('.application>tbody>tr')
.show()
.find('td:nth-child(2)').not(':contains("'+word+'")')
.parent()
.hide()
}

但是，我将如何在多列中显示与 td 值匹配的行。

类似下面的东西（不起作用）

function filterRows(word){
$('.application>tbody>tr')
.show()
.find('td:nth-child(2)').not(':contains("'+word+'")')
.find('td:nth-child(3)').not(':contains(30)')
.parent()
.hide()
}

基本上我希望能够只显示我的单词在“word”中传递的行在第二列 td 中，第三列包含“30”。

感谢您的提醒。

【问题讨论】：

标签： jquery

【解决方案1】：

您可以使用.end() 跳回链中，如下所示：

function filterRows(word){
  $('.application>tbody>tr').show()
    .find('td:nth-child(2)').not(':contains("'+word+'")').parent().hide()
    .end().end().end() //back 3 spots for parent, not and find
    .find('td:nth-child(3)').not(':contains(30)').parent().hide();
}

不过，在这种情况下，链接有点冗长，只需在变量中保留一个引用，如下所示：

function filterRows(word){
  var rows = $('.application>tbody>tr').show();
  rows.find('td:nth-child(2):not(:contains("'+word+'"))').parent().hide();
  rows.find('td:nth-child(3):not(:contains(30))').parent().hide();
}

或者更复杂一点的选择器：

function filterRows(word){
  $('.application>tbody>tr').show()
    .find('td:nth-child(2):not(:contains("'+word+'")), td:nth-child(3):not(:contains(30))').parent().hide();
}

【讨论】：

感谢您解决我的问题。我在第三个代码块中使用了选择器。下一站是买一本关于 JQuery 的书并更深入地学习它以了解选择器可以嵌套在哪里等。

【解决方案2】：

将.parent() 放在第一次找到之后怎么样。

.find('td:nth-child(2)').not(':contains("'+word+'")').parent()

【讨论】：

这将使第二个查找只查看第一个查找的结果。
我认为他想要选择满足这两个条件（连词）的行，所以希望回到 previos 集中是没有用的。这里有一些实验E：jsfiddle.net/N25pM

【解决方案3】：

function filterrows(word) {
  var row = $(".application>tbody>tr");
  row.each(function () {
    $this = $(this);
    var secondColumn = $('td:nth-child(2):not(contains("'+word+'"))', $this)
    var thirdColumn= $('td:nth-child(2):not(:contains("30")', $this)
    if (secondColumn.length && thridcolumn.length) {  //if you find both a second and third column that matches
      $this.hide();
    } else { //if the second and third column dont match
      $this.show();
    }
  });
}

【讨论】：

这将启动选择器引擎2n+1 次，n 是行数...加上创建大约2n 更多的jQuery 对象...性能会非常非常不好，尤其是大桌子。这也不正确，您的if 检查将始终为true，因为您正在检查if(jQueryObject && jQueryObject)。

【解决方案4】：

这是一种更有效的方法：

function filterRows(word){
    $('.application>tbody>tr').show()
        .filter(function() {
            return this.cells[ 1 ].innerHTML.indexOf( word ) < 0 ||
                   this.cells[ 2 ].innerHTML.indexOf( "30" ) < 0;
        }).hide()
}

如果存在嵌套标签，则应在过滤器中采用稍微不同的方法。在这种情况下，您可以将 this.cells[ 1 ].innerHTML 替换为：

(this.cells[ 1 ].innerText || this.cells[ 1 ].textContent)

（当然cells[ 2 ] 也一样。）

编辑：我有&& 而不是||。如果找到两个匹配项，听起来要求是.show()。固定的。现在，如果没有找到任何匹配项，它将隐藏。

【讨论】：