Question

我有一个类似下面的表格结构，我想在点击链接时使用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>

Answer 1

试试这个：

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

DEMO

Answer 2

对于此示例，我已为表格提供了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">，此代码将隐藏所有单元格，然后检查所单击的<a>的标题，并仅显示包含该文本的单元格。

不要忘记preventDefault()功能。这样可以防止点击<a>标记而没有真正href的默认行为 - 通常会跳到屏幕顶部。

使用jquery过滤表格单元格的显示

2 个答案: