创建节点（有添加，删除功能）

刘书门第

于 2018-04-15 19:48:21 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/qq_41442084/article/details/79952296

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
   var index = 1;
   var num = 0;
   //添加一行
   function addTr(){
    //获得table，显示table
    var _mytable = document.getElementById("mytable");
    _mytable.style.display = "block";

    //得到如输入的账号信息
    var namev = document.getElementById("id1").value;
    var passv = document.getElementById("id2").value;

    //通过dom创建tr td等节点
    //先创建tr
    var _tr = document.createElement("tr");
    //给tr添加背景色
    if(index%2 == 0){
     _tr.style.backgroundColor = "green";
    }else{
     _tr.style.backgroundColor = "blue";
    }
    //创建第一个td 序号
    var td1 = document.createElement("td");//创建td本身标签
    var textNode1 = document.createTextNode(index);//创建td里的文本节点，同时给文本值
    td1.appendChild(textNode1);//把文本节点添加到td节点中

    //创建第二个td 用户名
    var td2 = document.createElement("td");
    var textNode2 = document.createTextNode(namev);//创建用户名文本节点，把用户名给他
    td2.appendChild(textNode2)

    //创建第三个td 密码
    var td3 = document.createElement("td");
    var textNode3 = document.createTextNode(passv);//创建用户名文本节点，把用户名给他
    td3.appendChild(textNode3)

    //创建第四个td 操作
    var td4 = document.createElement("td");
    var del = document.createElement("input");
    del.type = "button";
    del.value = "删除";
    del.onclick = function(){
     _mytable.removeChild(_tr);
     num--;//行数减1
     if(num == 0){//一行也没有了
      _mytable.style.display = "none";
     }
    }
    td4.appendChild(del);


    //第一列，全选框
    var td5 = document.createElement("td");
    var ck = document.createElement("input");
    ck.type = "checkbox";
    td5.appendChild(ck);


    _tr.appendChild(td5);
    _tr.appendChild(td1);//把td节点添加到tr中
    _tr.appendChild(td2);
    _tr.appendChild(td3);
    _tr.appendChild(td4);

    //把_tr添加到table里
    _mytable.appendChild(_tr);
    index++;//索引加1
    num++;//行数加1
   }

   function checkall(ele){
    //得到所有的小checkbox,,先得到所有的tr
    var trs = document.getElementById("mytable").childNodes;

    for(var i=2;i<trs.length;i++){//直接跳过 0和1，0是一个不知道的texts，1是头
     var _tr = trs[i];//得到当前行
     //得到当前行的第一列 td,再得到td的第一个儿子input才是我们的checkbox
     var ck = _tr.firstChild.firstChild;
     //把全选的结果给ck
     ck.checked = ele;

    }

   }
  </script>

  <style type="text/css">
   table{
    display: none;
    width: 320px;
   }
   td{
    width: 80px;
    text-align: center;
   }
  </style>
</head>
<body>
  <center>
   用户名：<input type="text" id="id1"/><br />
   密   码：<input type="text" id="id2"/><br /><br />
   <input type="button" οnclick="addTr();" value="添加"/><br /><br />
   <table id="mytable" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px">
    <tr style="background-color: gray;">
     <td><input type="checkbox" οnclick="checkall(this.checked);"/>全选</td>
     <td>序号</td>
     <td>用户名</td><td>密码</td><td>操作</td>
    </tr>
   </table>

  </center>

</body>
</html>