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