Showing Hiding Table Rows with Javascript - can do with ID - how to do with Class

Question

I have a table which lists merchandise in a Guitar Store - each row contains one piece of merchandise  Each row  and each piece of merchandise  is either New  Used or on Consignment  I d like for a user to be able to click a link in a sidebar UL  clicking on either New  Used  or Cons  and have only the table rows of that corresponding condition remain visible  So if a user clicked  Used  then all New and Cons rows would become hidden    I have made this work with some simple JavaScript  but it uses getElementByID which won t work for me because I need to identify the TRs with classes  So that s where I get stumped  I m not sure how to make this work with classes    Here s the solution I ve worked out so far    lt html gt   lt head gt      lt script gt   function used         document getElementById  new   style display    none      document getElementById  cons   style display    none      document getElementById  used   style display          function news         document getElementByClass  new   style display          document getElementById  cons   style display    none      document getElementById  used   style display    none      function cons         document getElementByClass  new   style display    none      document getElementById  cons   style display          document getElementById  used   style display    none      lt  script gt     lt  head gt   lt body gt   lt span onClick  used     gt Used lt  span gt  lt br   gt   lt span onClick  news     gt New lt  span gt  lt br   gt   lt span onClick  cons     gt Cons lt  span gt  lt br   gt  lt br   gt    lt table border  1  gt   lt tr id  used  gt   lt td gt Used lt  td gt   lt  tr gt   lt tr id  new  gt   lt td gt New lt  td gt   lt  tr gt   lt tr id  cons  gt   lt td gt Cons lt  td gt   lt  tr gt   lt  table gt    lt  body gt   lt  html gt    The above code works ok  and if I could get it to work with classes instead it would solve my immediate need  However  ultimately I d like to scale this up to use for Brands as well - so that a user could click on a brand and see only the posts for that brand  In that situation I might have 20 or 30 brands in the table  so the above would not be ideal  Also this will ultimately live in a Wordpress site  and I would ideally be creating the classes for each brand from meta data in wordpress and similarly creating a dynamic UL containing the brands that toggle the table  as well as having a js solution that can work with a changing set of variables  So I know that what I have above is not the best approach  but it s the only one I know enough to try right now   Help with the above would be most appreciated - as would advice about how I might do this more effectively as I move towards the more challenging Brands aspect    EDIT   Google helped me out  and I have a new direction - this might solve my problem    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN     http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt    lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt   lt title gt Sandbox lt  title gt   lt meta http-equiv  Content-type  content  text html  charset utf-8    gt   lt style type  text css  media  screen  gt   lt  style gt     lt  head gt   lt body gt     lt ul class  side-nav  gt   lt li gt  lt a class  cond  href     gt Show all lt  a gt  lt  li gt   lt li gt  lt a class  used  href     gt Used lt  a gt  lt  li gt   lt li gt  lt a class  new  href     gt New lt  a gt  lt  li gt   lt li gt  lt a class  cons  href     gt Cons lt  a gt  lt  li gt    lt  ul gt    lt table gt   lt tr class  cond used  gt   lt td gt A Used Item lt  td gt   lt td gt Used  lt  td gt   lt  tr gt   lt tr class  cond new  gt   lt td gt A New Item lt  td gt   lt td gt New lt  td gt   lt  tr gt   lt tr class  cond cons  gt   lt td gt A Cons Item lt  td gt   lt td gt Cons lt  td gt   lt  tr gt   lt  table gt   lt script gt    function            ul side-nav a   click function                   tr cond   hide              tr       this  attr  class    show                        lt  script gt    lt  body gt   lt  html gt

User · Answer

You can change the class of the entire table and use the cascade in the CSS  http   jsbin com oyunuy 1

User · Answer

document getElementsByClassName returns a NodeList  not a single element  I d recommend either using jQuery  since you d only have to use something like     new   toggle    or if you want plain JS try    function toggle by class cls  on        var lst   document getElementsByClassName cls       for var i   0  i  lt  lst length    i            lst i  style display   on         none

User · Answer

JQuery 10 1 2 has a nice show and hide functions that encapsulate the behavior you are talking about  This would save you having to write a new function or keep track of css classes      new   show        new   hide      w3cSchool link to JQuery show and hide

[javascript] Showing/Hiding Table Rows with Javascript - can do with ID - how to do with Class?

Examples related to javascript

Examples related to html-table