Collapse Tables with specific Table ID? JavaScript

Question

I have the below JS at the top of my page and it successfully collapses ALL tables on load. However i am trying to figure out how to only collapse <table id="ctable"> tables with the ID of "ctable" or is there some other way of specifying the tables to make collapsible etc?

<script type="text/javascript"> 

   var ELpntr=false;
   function hideall()
   {
      locl = document.getElementsByTagName('tbody');
      for (i=0;i<locl.length;i++)
      {
         locl[i].style.display='none';
      }
   }

   function showHide(EL,PM)
   {
      ELpntr=document.getElementById(EL);
      if (ELpntr.style.display=='none')
      {
         document.getElementById(PM).innerHTML=' - ';
         ELpntr.style.display='block';
      }
      else
      {
         document.getElementById(PM).innerHTML=' + ';
         ELpntr.style.display='none';
      }
   }
   onload=hideall;
</script>

HTML echo'd using PHP this is in a for statement looping and there could be multiple tables.

echo "<table id=\"ctable\">"
."<thead><tr><th>"
."<a href=\"#\" onclick=\"showHide('show".$show->showid."','span".$show->showid."')\"><span id=\"span".$show->showid."\"><img src=\"images\icon_collapse.gif\"></span><span>".$show->showname."</span></a>"
."</th></tr></thead>";
echo "<table><tbody id=\"show".$show->showid."\">"
."<tr><td rowspan=\"8\"><a class=\"thumbnail\" href=\"#thumb\"><img src=\"".$show->image."\" height=\"150px\" width=\"150px\"><span><img src=\"".$show->image."\"/><br/>".$show->showname."</span></a></td><td rowspan=\"8\"><img class=\"line\" width=\"2\" height=\"100%\"></td><td class=\"jralign\">Show ID:</td><td>".$show->showid."</td></tr>"
."<tr><td class=\"jralign\">Show Link:</td><td><a href=\"".$show->showlink."\">".$show->showlink."</a></td></tr>"
."<tr><td class=\"jralign\">Started (Year):</td><td>".$show->started."</td></tr>"
."<tr><td class=\"jralign\">Ended (Year):</td><td>".$yearended."</td></tr>"
."<tr><td class=\"jralign\">Seasons:</td><td>".$show->seasons."</td></tr>"
."<tr><td class=\"jralign\">Classification:</td><td>".$show->classification."</td></tr>"
."<tr><td class=\"jralign\">Network:</td><td>".$show->network."</td></tr>"
."<tr><td class=\"jralign\">Status:</td><td>".$show->status."</td></tr>"
."</tfoot></table>"
."</table><br/>";

Answer 1

Not sure if what i did was the correct way, but it works.

All i did was change the <tbody> html tag inside the <table> to <tfoot> and updated my original javascript to look for the tfoot element instead and now only those tables collapse and not the others.

If anyone know if there will be issues in regards to this or cares to explain to me why this is, that would be excellent.

Answer 2

You're looking for getElementById:

locl = document.getElementById("ctable").getElementsByTagName('tbody');

---

Using jQuery, it would be

$('#ctable tbody').hide();

Answer 3

Typically IDs are unique to each element in a document. (EDIT should be)

You can access an ID quickly with the famous "dollar function":

function $(idString) { return document.getElementById(idString); } 

...which will return the element with that ID, e.g. var targetTable = $('ctable'); and you can go to work on it.

---

The name attribute can be used to group elements together. You can then use getElementsByName() to get the group (except in IE). Also, the name attribute is not strictly valid for most elements, so it's not really encouraged to use that.

However, I find that method quite useful anyway. This function will work in all browsers:

function $N(name,parentObj) {  //Can provide parent object to optimize search
  var ALL, E = new Array();
  parentObj ? ALL = $T("*",parentObj) : ALL = $T("*");

  for(a=0;a<ALL.length;a++) { 
   ALL[a].getAttribute('name') == name ? E.push(ALL[a]) : null; 
  }
  return E;
};

...which will return a group of elements with the same name.

---

Since we're on the subject, a strictly valid method of collecting a group of elements is having a common value in their class attribute.

The JQuery library has various functions that do all of this.

Answer 4

To make the HTML valid, you are allowed to use every ID exactly once.

If you're able to assign the same (CSS) class to the tables that you want to hide (and it should be possible), you can use the class selector of your favourite javascript framework (example: http://api.jquery.com/class-selector/).