Question

I have a table structure like the one below and I would like to use JQuery to filter the display of the table cells when I click on a link. For example, if I had a link that looked like this <a href="#" title="cat">show cats</a> I would like to hide all the table cells besides those that contained the word “cat” in them. I am thinking that I could use a combination of “attr”, “contains” and “hide/show”, so I can grab the title attribute of the link I am clicking on and then match it up with the text in the table cell and finally show/hide the cells I want, but theory and implementation are 2 different things, and I am not even sure if this would work or how to put it all together so I thought I would ask the experts here for some advise.

<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

try this:

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

DEMO