关于DOM JS 操作table tr

由于最近要做一个模块，是由别人的接口去获取一些结果集，生成一个列表，同时点击每一行都能展现这一行的关联的数据查询过来，同时在这一行的下一行展现出来，就类似于一颗动态树，但是我想用列表的形式展现。每一行同时有一个CHECKBOX，最后一行除外。同时具有联动功能，几乎就是一个动态树的感觉。但是想用列表一层一层的展示，希望哪位大哥能写个JS操作一个简单的demo，由于第一次这样做，没啥头绪。具体的流程就是，第一次我从后台查出一些结果，生成N行，每一行都具有点击事件，点击后查询关联的数据，并在这一行的下一行展现出来，就是在这一行的下一行插入一行的感觉。且关联的数据行都有CHECKBOX且是联动的，最后一行没CHECKBOX.同时具有关闭下一级的按钮等。

解决方案 »

  1.   

    不知道第二级你是否还可以点击出来第三级？如果还出来第三级就不好做了，因为用js写入页面的动态元素，再用js调用动态元素的时候没反应。不过，你可以参看jquery ui插件，里面有好几种这样的树。你可以在那里找到灵感。如果没有，则可以直接调用table对象，然后调用tb().create......这样就可以了
      

  2.   

    你这个用jquery很好写，有时间我帮你实现；
      

  3.   

    额 能大概给个DEMO吗。。我在线等额。。这2天比较急就差这个展现了。。而且是这样 每一级都带CHECKBOX，  我每次勾选后保存起来。下次展现的时候我要把勾选的也要勾选上，相当于 我存取勾选的记录，然后可以修改。
      

  4.   

    ajax我会做。。不过JDBC的结果集不会。。
      

  5.   


    不用什么插件，不用任何开源的破玩意，自己搞定。思路：使用<table> + <checkbox> + <a> 三个标签 就可以搞定了。问题1：如何显示数据：td 里面 放一个 checkbox 和a 标签  （a标签 显示功能点）备注：功能点如果有下一级功能点 则这个 td 里面再放个table ，依次类推问题2：如何索引table 中的 chexbox 或者 a 标签
    var obj=表格对象
    for(var i=0;i<obj.rows.length;i++){
    if(obj.rows[i].firstChild.firstChild.type=='checkbox'){
    //获取checkbox标签
    }
    if(obj.rows[i].firstChild.lastChild.type=='a'){
    //获取a标签
    }
    }问题3：如何隐藏功能点tr.style.display="none" 问题4：table 如何增加、删除tr添加一行var obj=表格对象
    var newTr=obj.insertRow();//添加一行
    var newTd=newTr.insertCell();//添加一列
    newTd.innerHTML='测试'//为td 添加内容
    删除一行var obj=表格对象
    obj.deleteRow();//删除一行
      

  6.   


    额 我想请问下 我第一次便利出来的 第一级的 是不是就是 
    <tr><td id='first'><input type='checkbox'/>1</td></tr>我点击后的下一级 是在first里insert一个table吗？还是怎么
      

  7.   

      function open1(){
    if(qygl.style.display=='')
       qygl.style.display='none';
    else if(qygl.style.display=='none')
       qygl.style.display='';
      } 
    是不是树状导航菜单啊
    利用 onClick="javascript:open1()"
    <?php
     if(!($_GET[lmbs]=="子树内容" ||$_GET[lmbs]=="子树内容")){
    ?>
    style="display:none"
    <?php
    }
    ?>
      

  8.   


    <tr><td id='first'><input type='checkbox'/>1<table>第N级节点</table></td><</tr>
    可以的~
      

  9.   

    Dtree 之类的树形菜单 源码是用的<div>功能点</div> <img> 等标签其实使用table 未尝不可<table>
    <tr>
    <td><table>……</td>
    </tr>
    </table>利用insertRow 和deleteRow  基本可以实现任何 你想要的效果 自己琢磨下给你个table 增 删 tr的例子<html>
    <head>
    <script type="text/javascript">
    function insRow()
      {
      var x=document.getElementById('myTable').insertRow(0)
      var y=x.insertCell(0)
      var z=x.insertCell(1)
      y.innerHTML="NEW CELL1"
      z.innerHTML="NEW CELL2"
      }
    </script>
    </head><body>
    <table id="myTable" border="1">
    <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
    </tr>
    <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
    </tr>
    <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
    </tr>
    </table>
    <br />
    <input type="button" onclick="insRow()" value="插入行"></body>
    </html>
    <html>
      

  10.   

    给你个简单思路
    <table id="a"></table>var table = document.getElementById("a");
    var Tr = table.insertRow(0);
    Tr.setAttribute("onclick",你的单击事件函数名称);
    var Td = Tr.insertCell(0);
    Td.innerHTML = "单元格要显示的数据内容";代码很简单，但基本能满足你的要求．．根据你的实际情况来修改很强的Dom在线手册，是我见过最全的．希望能帮到你 http://www.web666.net/dom
    另外:http://www.web666.net/dom/insertrow.html 为表格增加一行
    http://www.web666.net/dom/insertcell.html　　为某行增加一列