根據其他行中的內容過濾HTML表格行

我在我的HTML網站中有一張表，我有效地將它用作列表來顯示項目。根據其他行中的內容過濾HTML表格行

每個項目都有：

在列中的圖像[0]
在列的名稱[1]
一列描述[2]

它稍但比這更復雜，列[0]和[2]有一個rowspan="2"，每個項目在表格中都有第二行，它的兩個類別顯示在列[1]的名稱下面。

這意味着它結束了看起來像這樣： - https://jsfiddle.net/vapdp54z/2

我想某處簽到我的網站上盒，其中，在默認情況下，沒有被選中，所有的項目展示。當勾選複選框時，我希望所有項目都隱藏，而複選框內容沒有作爲其分類之一。

我發現了類似的問題，做了類似的事情，但他們不工作，因爲我在我的情況我需要檢查每隔一行，當沒有找到匹配時，它需要隱藏該行和一個在上面。

謝謝。

來源

2015-11-28 Toby Smith

如果您的複選框看起來是這樣的：

<div> 
    <input type="checkbox" name="categories" value="CATEGORY1"> Category One<br> 
    <input type="checkbox" name="categories" value="CATEGORY2"> Category Two<br> 
    <input type="checkbox" name="categories" value="CATEGORY3"> Category Three<br> 
    <input type="checkbox" name="categories" value="CATEGORY4"> Category Four <br> 
</div>

然後，你可以用自己的價值，隱藏與TD的含匹配值的任何錶行，也隱藏上一行像這樣：

$(document).ready(function() { 
    $('input[name=categories]').click(function() { 
     // get the value of the clicked checkbox 
     var cat = $(this).val(); 
     // select odd rows (the ones containing categories) 
     $('tr:odd').each(function() { 
      // get the td's in the row 
      $('td', this).each(function() { 
       // if the td html contains the category, 
       // hide its parent row and the previous row 
       if ($(this).html().indexOf(cat) > -1) 
       { 
        $(this).parent().css('display','none'); 
        $(this).parent().prev().css('display','none'); 
       } 
      }); 
     }); 
    }); 
});

此解決方案不處理取消選中複選框時隱藏行的撤消操作，但這樣做相當簡單。

下面是更新後的小提琴鏈接：https://jsfiddle.net/vapdp54z/3/

我希望這有助於！

編輯：如果你想隱藏切勿所有行包含的類別，只是改變>中的IndexOf到==（我沒有看過你的問題仔細

）檢查

來源

2015-11-30 00:31:15 kburlz

根據其他行中的內容過濾HTML表格行

回答

相關問題