Filtering a table

Question

I'm creating a prototype website with a table. I just want to know how can I filter the table contents? Example I have two buttons which are 'writers' and 'illustrators' and when I click the button for writer, I just want the table to just show the writers.

Is it possible to filter it using the table row id class?

Like:

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

Or are there any easy way to do it?

Answer 1

Are you looking for something like

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

Demo: Fiddle