我有一个如下所示的表格结构,我想在单击链接时使用 JQuery 过滤表格单元格的显示。例如,如果我有一个看起来像这样的链接<a href="#" title="cat">show cats</a>
我想隐藏所有表格单元格,除了那些包含单词"cat"的单元格。我想我可以使用"attr"、"contains"和"hide/show"的组合,这样我就可以抓取我正在点击的链接的 title 属性,然后将其与表格单元格中的文本匹配,最后显示/隐藏我想要的单元格,但理论和实现是两回事, 我什至不确定这是否有效或如何将它们放在一起,所以我想我会向这里的专家寻求一些建议。
<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>
试试这个:
$('a').click(function(e){
e.preventDefault(); // prevents default action of the anchor
var con = $(this).attr('title');
$('td').hide();
$('td:contains("'+ con +'")').show()
})
演示
对于此示例,我为表指定了 id tableSelector
-
<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">
,此代码将隐藏所有单元格,然后检查单击<a>
的标题,并仅显示包含该文本的单元格。
不要忘记preventDefault()
功能。 这将防止单击没有实际href
的<a>
标签的默认行为 - 通常会跳转到屏幕顶部。