用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过滤表格单元格的显示

回答

相关问题