根據多列中的值顯示行。 JQuery

在JQuery中隱藏一個基於預定義列的td表值很容易使用下面的代碼。根據多列中的值顯示行。 JQuery

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

基本上我希望能夠只顯示在我的字是「言」通過行是在第二列TD和第三列包含「30」。

感謝您的任何擡頭。

來源

2010-11-17 Lord Yorkshire

您可以使用.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(); 
}

來源

2010-11-17 16:05:41

感謝您解決我的問題。我在第三代碼塊中使用了選擇器。下一站是獲得一本關於JQuery的書籍，並更深入地瞭解它，以瞭解選擇器可以嵌套的位置等。 – 2010-11-17 16:32:28

如何把.parent()第一次找到之後。

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

來源

2010-11-17 16:09:39 Lachezar

這會使第二個查找結果中的第一個查找結果。 – 2010-11-17 16:10:56

我想他想要選擇滿足這兩個條件的行（連接詞），所以希望回到previos集合中沒有用。一些實驗herE：http://jsfiddle.net/N25pM/ – Lachezar 2010-11-17 16:32:59

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

來源

2010-11-17 16:11:14

這會觸發選擇器引擎'2n + 1'次，'n'是行數......再加上'2n'創建更多jQuery對象......表現會非常非常糟糕，特別是對於更大的桌子。這也是不正確的，因爲你正在檢查if（jQueryObject && jQueryObject）''，所以'if'檢查總是*爲'true'。 – 2010-11-17 16:13:23

這裏做更有效的方式：

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()，如果兩個匹配找到。固定。現在如果找不到任何一個匹配就會隱藏。

來源

2010-11-17 16:33:57 user113716

根據多列中的值顯示行。 JQuery

回答

相關問題