用jquery過濾表格單元格的顯示

我有一個類似下面的表格結構，我想用jQuery過濾表格單元格的顯示，當我點擊一個鏈接。例如，如果我有一個看起來像這樣的鏈接<a href="#" title="cat">show cats</a>，我想隱藏除那些包含單詞「cat」的表格單元格之外的所有表格單元格。我想我可以使用「attr」，「contains」和「hide/show」的組合，因此我可以抓住我點擊的鏈接的title屬性，然後將它與表格單元格中的文本進行匹配並最終顯示/隱藏我想要的單元格，但理論和實現是兩個不同的東西，我甚至不確定這是否會起作用或如何將它們放在一起，所以我想我會請這裏的專家提供一些建議。用jquery過濾表格單元格的顯示

<table> 
    <tr> 
    <td>cat</td> 
    <td>cat</td> 
    </tr> 

    <tr> 
    <td>dog</td> 
    <td>dog</td> 
    </tr> 

    <tr> 
    <td>horse</td> 
    <td>horse</td> 
    </tr> 
</table>

來源

2012-07-08 nosx

試試這個：

$('a').click(function(e){ 
    e.preventDefault(); // prevents default action of the anchor 
    var con = $(this).attr('title'); 
    $('td').hide(); 
    $('td:contains("'+ con +'")').show() 
})

DEMO

來源

2012-07-08 22:06:42 undefined

這個作品奇蹟非常感謝你。只有一個小問題，如果它沒有多大要求。我將如何再次顯示所有單元格，然後使用show all鏈接等方式刷新頁面。再次感謝。 – nosx 2012-07-08 22:20:32

@nosx你可以使用這個：'$（'td'）。show（）;' – undefined 2012-07-08 22:21:53

太棒了，非常感謝你。我希望在第二次請求中我沒有花太多時間，因爲這不是我原來的問題的一部分。 – nosx 2012-07-08 22:26:10

在這個例子中我已經給表tableSelector一個id -

<table id="tableSelector"></table>

$("a.toggle_link").on('click',function(e){ 
    e.preventDefault(); 
    var cells = $("#tableSelector td"); 
    var searchString = $(this).attr('title'); 
    cells.hide(); 
    $("#tableSelector td:contains('" + searchString + "')").show(); 
});

對於單擊的每個<a class="toggle_link">，此代碼將隱藏所有單元格，然後檢查單擊的標題並僅顯示包含該文本的單元格。

不要忘記preventDefault()函數。這將防止點擊<a>標籤的默認行爲，而不是真正的href - 通常會跳到屏幕的頂部。

來源

2012-07-08 22:08:23 Lix

嗯，我無法完成這項工作。也許因爲我在標題中有空格，但表格單元格也有空格，所以不知道爲什麼它不適用於我。 – nosx 2012-07-08 22:24:11

您是否對錶格元素進行了更改？給它添加一個ID？還有''標籤？ – Lix 2012-07-08 22:25:32

我剛剛刷新了，看到你的額外評論，所以我相信它現在可以工作，但我已經給了undefined :(感謝你的幫助，非常感謝。 – nosx 2012-07-08 22:27:34

用jquery過濾表格單元格的顯示

回答

相關問題