There is an element, for example:

<div category="bedclothes">...</div>

and there is a table, for example:

 <table> <tr category="everyday">...</tr> <tr category="badclothes everyday">...</tr> <tr>...</tr> </table>

How to use jQuery by clicking on a div to hide rows in a table where the category attribute does not match? Sam thought of it this way:

 $('div [category]').click(function () { $('tr[category]').css("display","none"); $('tr[category = "'+$(this).attr('category')+'"]').css("display","table-row"); });

But! The whole point is that tr can have several values ​​in the category attribute, separated by a space, and for such cases my code does not work, help to modify it?

  • one
    The category attribute is not in the html and html5 specification. Use data-category - zb '

1 answer 1

The following version came to my mind http://jsfiddle.net/cJ8MV/15/

 $('tr').click(function() { if ($('table').hasClass('turned')) { $('tr').show(); $('table').toggleClass('turned') } else { if ($(this).attr('category')) { var n = $(this).attr('category').split(" "); $('tr').hide(); for( var i = 0; i< n.length; i++) { $('tr[category*="'+n[i]+'"]').show(); } $('table').toggleClass('turned'); } else { $('tr[category]').hide(); $('table').toggleClass('turned'); } }