过滤表

Question

我正在创建一个带有表格的原型网站。我只想知道如何过滤表格内容？示例我有两个按钮，分别是“作家”和“插画家”，当我单击作家按钮时，我只想让表格显示作家。

是否可以使用表格行id类进行过滤？

喜欢：

<table>    
  <tr class="writer">
     <td>John Doe </td>
     <td>Jan 01, 1980</td>
     <td>jondoe@domain.com</td>
  </tr>
  <tr clas="illustrator">
     <td>Jane Doe </td>
     <td>Sept 01, 1980</td>
     <td>janedoe@domain.com</td>
  </tr>
  <tr class="illustrator">
     <td>Mel Smith </td>
     <td>Aug 01, 1980</td>
     <td>meeeeel@domain.com</td>
  </tr>
  <tr class="writer">
     <td>Harry Smith </td>
     <td>Dec 01, 1980</td>
    <td>hsmith@domain.com</td>
  </tr>
</table>

或者有什么简单的方法吗？

Answer 1

你在寻找类似的东西

jQuery(function () {
    $('#illustrator').click(function () {
        $('table tr.writer').hide();
        $('table tr.illustrator').show();
    })
    $('#writer').click(function () {
        $('table tr.writer').show();
        $('table tr.illustrator').hide();
    })
})

演示：Fiddle