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