基於層次結構的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";
   }
}