Javascript-Collapsing and expanding table rows based on hierarchy

Question

I have the following table generated by a cgi script:

<table>
<tr id='vfipbb'><td>col 1,0</td><td>col 1,1</td></tr>
<tr id='vfipbb.alipbb'><td>col 2,0</td><td>col 2,1</td></tr>
<tr id='vfipbb.esipbb'><td>col 3,0</td><td>col 3,1</td></tr>
<tr id='vfipbb.esipbb.esipbb_madrid'><td>col 4,0</td><td>col 4,1</td></tr>
<tr id='vfipbb.esipbb.esipbb_barcelona'><td>col 5,0</td><td>col 5,1</td></tr>
</table> 

This is just a sample of what it would look like, but the important bit to note is the id.

when the webpage first loads all rows are collapsed except for the root context (vfipbb). I want to enable functionality when the root context is clicked it will expand all child rows listed under this, for example (alipbb), (esipbb) and if one of the child rows is clicked it will expand all grandchildren rows, for example (esipbb_madrid) (esipbb_barcelona).

Is there any efficient way of doing this in javascript based on ID? Any pointer in the right direction would be greatly welcome!

Answer 1

Not a working code, but something to get you started

// add click handlers  to all tr   
var tr0 = document.getElementsByTagName("tr");
for (var i = 0; i < tr0.length; i++) {
   tr0[i].addEventListener("click", openChild);
}


function openChild() {

    var id = this.id;

   //regex that matches a string beginning with 
   //the id followed by dot and some other words
   var regex = new RegExp("^" + id + ".[a-z_]+$", "g");

   var tr1 = document.getElementsByTagName("tr");

   //browse through the tr(s)
   for (var i = 0; i < tr1.length; i++) {

       //Learn regex test function!
       if (regex.test(tr1[i].id)) //if a match found
        //display children
        document.getElementById(tr1[i].id).style.visibility = "visible";
   }
}