getElementsByClassName not working

Question

I coded a php page that displays information from a mysql database neatly into tables  I would like to hide empty table rows with an onLoad event handler   Here is a sample table with code that hides a  lt td gt  when it has no content  but i can only get it to work with different IDs            lt script type  text javascript  gt          function hideTd id               if document getElementById id  textContent                       document getElementById id  style display    none                                      lt  script gt           lt  head gt           lt body onload  hideTd  1   hideTd  2   hideTd  3     gt           lt table border  1  gt             lt tr gt               lt td id  1  gt not empty lt  td gt             lt  tr gt             lt tr gt               lt td id  2  gt  lt  td gt             lt  tr gt             lt tr gt               lt td id  3  gt  lt  td gt             lt  tr gt           lt  table gt       lt  body gt    what i want to do is use a class for the  lt td gt s to achieve the same thing while only referencing the class once  and not referencing every single id that I want to remove  which will not even work for my dynamic content  I tried using this code        lt script type  text javascript  gt      function hideTd            if document getElementsByClassName   textContent                   document getElementsByClassName   style display    none                          lt  script gt       lt  head gt       lt body onload  hideTd  1     gt       lt table border  1  gt         lt tr gt           lt td class  1  gt not empty lt  td gt         lt  tr gt         lt tr gt           lt td class  1  gt  lt  td gt         lt  tr gt         lt tr gt           lt td class  1  gt  lt  td gt         lt  tr gt       lt  table gt   lt  body gt    but it does not work  its supposed to hide the empty  lt td gt s that have the specified class  how do i hide empty  lt td gt s using classes  not IDs

User · Accepted Answer

There are several issues    Class names  and IDs  are not allowed to start with a digit  You have to pass a class to getElementsByClassName    You have to iterate of the result set    Example  untested     lt script type  text javascript  gt  function hideTd className       var elements   document getElementsByClassName className       for var i   0  length   elements length  i  lt  length  i             if  elements i  textContent                   elements i  style display    none                         lt  script gt   lt  head gt   lt body onload  hideTd  td     gt   lt table border  1  gt     lt tr gt       lt td class  td  gt not empty lt  td gt     lt  tr gt     lt tr gt       lt td class  td  gt  lt  td gt     lt  tr gt     lt tr gt       lt td class  td  gt  lt  td gt     lt  tr gt   lt  table gt   lt  body gt    Note that getElementsByClassName   is not available up to and including IE8   Update   Alternatively you can give the table an ID and use   var elements   document getElementById  tableID   getElementsByTagName  td      to get all td elements   To hide the parent row  use the parentNode property of the element   elements i  parentNode style display    none

User · Answer

If you want to do it by ClassName you could do    lt script type  text javascript  gt  function hideTd className       var elements       if  document getElementsByClassName                elements   document getElementsByClassName className             else               var elArray               var tmp   document getElementsByTagName elements             var regex   new RegExp       s     className      s               for   var i   0  i  lt  tmp length  i                    if   regex test tmp i  className                      elArray push tmp i                                     elements   elArray             for var i   0  i  lt  elements length  i             if  elements i  textContent                   elements i  style display    none                         lt  script gt

[javascript] getElementsByClassName not working

Examples related to javascript

Examples related to webforms

Examples related to html-table

Examples related to dynamic-data