创建节点(有添加,删除功能)

<!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 />
   密&nbsp;&nbsp;&nbsp;码:<input type="text" id="id2"/><br /><br />
   <input type="button" onclick="addTr();" value="添加"/><br /><br />
   <table id="mytable"  border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px">
    <tr style="background-color: gray;">
     <td><input type="checkbox" onclick="checkall(this.checked);"/>全选</td>
     <td>序号</td>
     <td>用户名</td><td>密码</td><td>操作</td>
    </tr>
   </table>
   
  </center>
  
 </body>
</html>


阅读更多
下一篇表格添加、超链接
想对作者说点什么? 我来说一句

(c#)XmlHelper

2011年06月10日 121KB 下载

C# 实现单链表

2014年03月24日 40KB 下载

没有更多推荐了,返回首页

关闭
关闭