基于层次结构的Javascript折叠和扩展表行

Question

我有一个cgi脚本生成的下表：

<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> 

这只是其外观的一个示例，但需要注意的重要一点是id。

当网页首次加载时，除根上下文（vfipbb）之外的所有行均折叠。 我想在单击根上下文时启用功能，它将展开在此之下列出的所有子行，例如（alipbb），（esipbb），如果单击子行之一，它将展开所有子孙行，例如（esipbb_madrid ）（esipbb_barcelona）。

在基于ID的javascript中，有任何有效的方法吗？ 任何朝着正确方向的指针都将受到欢迎！

Answer 1

不是有效的代码，但可以帮助您入门

// 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";
   }
}