Jquery show hide table rows

Question

I want to be able to show hide the rows in a table using jquery  Ideally I want to have buttons above the table to sort the table with   i e  Show rows with id black   Show rows with id white   Show all rows   I have searched all over but cannot find a solution  Anyone know how i can do this with jquery and make it cross browser compatible   Thanks  Code below    lt table class  someclass  border  0  cellpadding  0  cellspacing  0  summary  bla bla bla  gt   lt caption gt bla bla bla lt  caption gt   lt thead gt     lt tr id  black  gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt     lt  tr gt   lt  thead gt   lt tbody gt     lt tr id  white  gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt   lt  tr gt     lt tr id  black  gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt   lt  tr gt   lt  tbody gt

User · Answer

http   sandbox phpcode eu g corrected-b5fe953c76d4b82f7e63f1cef1bc506e php   lt span id  black only  gt Show only black lt  span gt  lt br gt   lt span id  white only  gt Show only white lt  span gt  lt br gt   lt span id  all  gt Show all of them lt  span gt   lt style gt   black background-color black    white background-color white    lt  style gt   lt table class  someclass  border  0  cellpadding  0  cellspacing  0  summary  bla bla bla  gt   lt caption gt bla bla bla lt  caption gt   lt thead gt     lt tr class  black  gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt       lt th gt Header Text lt  th gt     lt  tr gt   lt  thead gt   lt tbody gt     lt tr id  white  gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt   lt  tr gt     lt tr class  black  style  background-color black   gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt       lt td gt Some Text lt  td gt   lt  tr gt   lt  tbody gt   lt script gt    function           black only   click function            white   hide            black   show                   white only   click function            black   hide            white   show                   all   click function            white   show            black   show                  lt  script gt

User · Answer

The filter function wasn t working for me at all  maybe the more recent version of jquery doesn t perform as the version used in above code  Regardless  I used        var black       black        var white       white      The selector will find every element classed under black or white  Button functions stay as stated above           showBlackButton   click function                black show               white hide                     showWhiteButton   click function                white show               black hide

User · Answer

Change your black and white IDs to classes instead  duplicate IDs are invalid   add 2 buttons with the proper IDs  and do this   var rows      table someclass tr         showBlackButton   click function         var black   rows filter   black   show        rows not  black   hide             showWhiteButton   click function         var white   rows filter   white   show        rows not  white   hide             showAll   click function         rows show             lt button id  showBlackButton  gt show black lt  button gt   lt button id  showWhiteButton  gt show white lt  button gt   lt button id  showAll  gt show all lt  button gt    lt table class  someclass  border  0  cellpadding  0  cellspacing  0  summary  bla bla bla  gt       lt caption gt bla bla bla lt  caption gt       lt thead gt             lt tr class  black  gt                             lt  tr gt       lt  thead gt       lt tbody gt           lt tr class  white  gt                           lt  tr gt           lt tr class  black  gt                          lt  tr gt       lt  tbody gt   lt  table gt    It uses the filter   docs  method to filter the rows with the black or white class  depending on the button    Then it uses the not   docs  method to do the opposite filter  excluding the black or white rows that were previously found     EDIT  You could also pass a selector to  not   instead of the previously found set  It may perform better that way   rows not    black    hide             rows not    white    hide         or better yet  just keep a cached set of both right from the start   var rows      table someclass tr    var black   rows filter   black    var white   rows filter   white         showBlackButton   click function         black show        white hide             showWhiteButton   click function         white show        black hide

[jquery] Jquery show/hide table rows

Examples related to jquery