3

我有一个像下面这样的表格结构，我想在单击链接时使用 JQuery 过滤表格单元格的显示。例如，如果我有一个看起来像这样的链接，<a href="#" title="cat">show cats</a>我想隐藏除那些包含“猫”字样的表格单元格之外的所有表格单元格。我在想我可以使用“attr”、“contains”和“hide/show”的组合，所以我可以抓住我点击的链接的标题属性，然后将它与表格单元格中的文本匹配最后显示/隐藏我想要的单元格，但理论和实现是两件不同的事情，我什至不确定这是否可行或如何将它们组合在一起，所以我想我会在这里向专家寻求一些建议。 

<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>
4

2 回答 2

3

试试这个：

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

演示

于 2012-07-08T22:06:42.723 回答
1

对于这个例子，我给表一个 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()功能。这将防止点击<a>没有真实标签的默认行为href- 通常会跳转到屏幕顶部。

于 2012-07-08T22:08:23.480 回答