Question

在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”。

感谢任何提醒。

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

Answer 2

第一次找到之后如何放置.parent()。

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

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

Answer 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()。固定。现在，如果找不到匹配项，它将隐藏。

根据多列中的值显示行数。 JQuery的

4 个答案: