基于table的js目录树的实现，添加修改删除

最新推荐文章于 2022-10-31 17:03:01 发布

zhcwd

最新推荐文章于 2022-10-31 17:03:01 发布

阅读量1.1k

点赞数

文章标签： table javascript button input delete function

本文链接：https://blog.csdn.net/zhcwd/article/details/7492945

版权

上段时间，老大要求我用js实现目录树，还不能用已经封装好了的js树，同时要兼顾大数据，即在拥有几千个节点的情况下程序的反应速度，因为对css修饰极其不喜欢，只能踏上了html标签的道路，在分析一个大神早期的js树的实现，动手写了一个，望指点

<html>
    <script language="javascript">
    function OnFormLoad()
    {
        document.getElementById("FormTabletd").innerHTML = GetTreeContent();
        document.getElementById("Info").innerHTML = "当前选中了第1个节点";
    }
     
    function GetTreeContent()
    {
        var sTreeContent;
        sTreeContent = "<table width=100% id='TreeTable' valign=top>";
        sTreeContent += "<tr><td width=100%><table width=100% id='t1'>";
        sTreeContent += "<tr><td width=100% id='parent1' οnclick=javascript:OnClickParent('1')><img id='img1' src='icons/2.png' >节点1<input type=hidden value='0' id='parenth1'><input type=hidden value='3' id='CurParIdChild1'></td></tr>";
        sTreeContent +=       "<tr><td id='child11' width=100% ondbclick=javascript:ondblclickChild()>   <img src='icons/11.png'>节点1的子节点1<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,1)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(1,11)'></td></tr>";
        sTreeContent +=       "<tr><td id='child12' width=100% >   <img src='icons/11.png'>节点1的子节点2<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,1)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(1,12)'></td></tr>";
        sTreeContent +=       "<tr><td id='child13' width=100% >   <img src='icons/11.png'>节点1的子节点3<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,1)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(1,13)'></td></tr>";
        sTreeContent += "</table></td></tr><tr><td width=100%><table width=100% id='t2'>";
        sTreeContent += "<tr><td  width=100% id='parent2' οnclick=javascript:OnClickParent('2')><img id='img2' src='icons/2.png'>节点二<input type=hidden value='0' id='parenth2'><input type=hidden value='3' id='CurParIdChild2'></td></tr>";
        sTreeContent +=       "<tr><td id='child21' width=100%>   <img  src='icons/11.png'>节点2的子节点1<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,2)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(2,21)'></td></tr>";
        sTreeContent +=       "<tr><td id='child22' width=100%>   <img  src='icons/11.png'>节点2的子节点2<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,2)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(2,22)'></td></tr>";
        sTreeContent +=       "<tr><td id='child23' width=100%>   <img  src='icons/11.png'>节点2的子节点3<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,2)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(2,23)'></td></tr>";
        sTreeContent += "</table></td></tr><tr><td width=100%><table width=100% id='t3'>";
        sTreeContent += "<tr><td  width=100% id='parent3' οnclick=javascript:OnClickParent('3')><img id='img3' src='icons/2.png' >节点三<input type=hidden value='0' id='parenth3'><input type=hidden value='3' id='CurParIdChild3'></td></tr>";
        sTreeContent +=       "<tr><td id='child31' width=100%>   <img  src='icons/11.png'>节点3的子节点1<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,3)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(3,31)'></td></tr>";
        sTreeContent +=       "<tr><td id='child32' width=100%>   <img  src='icons/11.png'>节点3的子节点2<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,3)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(3,32)'></td></tr>";
        sTreeContent +=       "<tr><td id='child33' width=100%>   <img src='icons/11.png'>节点3的子节点3<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,3)'><input type=button name='rename' value='修改 ' onClick='javascript:OnChange(3,33)'></td></tr>";
        sTreeContent += "</td></tr>";
        sTreeContent += "</table>";

        return sTreeContent;
     }
     
    function OnClickParent(ParentID)
     {
        var piconsrc;
        piconsrc = parseInt(document.getElementById("parenth"+ParentID).value);
         //alert(piconsrc);
        document.getElementById("CurParID").value = ParentID;
        var id;
        id = parseInt(document.getElementById("CurParIdChild"+ParentID).value);
        document.getElementById("Info").innerHTML = "当前选中了第" + ParentID + "个节点";
        for(i=1;i<=id;i++)
        {
            if(piconsrc == 0)
            {
                document.getElementById("img"+ParentID).src = "icons/2.png";
                document.getElementById("child"+ParentID+i).style.display = "none";
                document.getElementById("parenth"+ParentID).value = '1';
            }
            else
            {
                document.getElementById("img"+ParentID).src = "icons/2.png";
                document.getElementById("child"+ParentID+i).style.display = "block";
                document.getElementById("parenth"+ParentID).value = '0';
            }
        }
    }

    function OnAddNode()
    {
        CurId = document.getElementById("CurParID").value;
        id = parseInt(document.getElementById("CurParIdChild"+CurId).value);

        sInner = document.getElementById("t"+CurId);
        document.getElementById("CurParIdChild"+CurId).value = id+1;
         //alert(document.getElementById("CurParIdChild"+CurId).value);
          
        MyId = id+1;
        inner = "<td width=100%>   <img src='icons/11.png'>节点";
        inner +=CurId;
        inner +="的子节点";
        inner +=MyId;
        inner +="<input type=button name='delete' value='删除' onClick='javascript:OnDelete(this,";
        inner +=CurId;
        inner +=")' type='button'><input name='rename' value='修改 ' οnclick='javascript:OnChange("
        inner +=CurId;
        inner +=",";
        inner +=CurId+MyId;
        inner +=")' type='button'></td>";
        //inner +=")'></td>";
        
           
        var newRow = sInner.insertRow(id+1);
        var newCell = newRow.insertCell(0);
        newCell.innerHTML = inner;
        nodeid = "child" + CurId + MyId;
           
        newCell.id = nodeid;
          
          
    }
     
    

    function OnDelete(r,CurId){
                
        var id=r.parentNode.parentNode.rowIndex
        if(id==0)
        {
            return;
        }
        sInner = document.getElementById("t"+CurId);
        //alert(document.getElementById("t"+CurId).);
        sInner.deleteRow(id);
        document.getElementById("CurParIdChild"+CurId).value = id-1;
        
        
   }
    
    function OnChange(CurId,ChildId)
    {
         //Id=document.getElementById("child"+ChildID);
         
        var text=prompt("文件名","节点X")
        if (text!=null && text!="")
        {    
            inner ="   <img src='icons/11.png'>";
            inner +=text;
            inner +="<input name='delete' value='删除' οnclick='javascript:OnDelete(this,";
            inner +=CurId;
            inner +=")' type='button'><input name='rename' value='修改 ' οnclick='javascript:OnChange("
            inner +=CurId;
            inner +=",";
            inner +=ChildId;
            inner +=")' type='button'>";
             document.getElementById("child"+ChildId).innerHTML = inner;
        }
         
    }
   </script>
    <body οnlοad="javascript:OnFormLoad()">
        <table width = 50% height=100%>
            <tr>
                <td id='Info'>aa</td>
            </tr>
            <tr>
                <td width=100% id="FormTabletd"></td>
            </tr>
            <input type=button name='add' value="添加" onClick='javascript:OnAddNode()'>
            
            
            <input type=hidden value='1' id='CurParID'>
        </table>
    </body>
</html>

后期，如果需要连接数据库，在新建一个php页面，使用ajax传输，即可完成。