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

Javascript-根据层次结构折叠和扩展表行

1 个答案: