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

原创 2018年04月15日 19:48:21

<!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>


动态添加删除table页面一行input表格

之前写过两篇关于HTML页面添加结点,删除结点的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行,删除行,碰巧那会儿比较闲,就动手写了一下,记录下来,希望能帮到需要的朋友们。 上面的代码中...
  • magi1201
  • magi1201
  • 2015-04-15 23:06:18
  • 12134

JS-案例-增加和删除节点

需求:  /*  * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:  * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在...
  • cuigaochong
  • cuigaochong
  • 2015-09-03 12:00:27
  • 1307

jQuery之dom操作(查询、创建、插入、删除、复制节点)

jQuery之dom操作(查询、创建、插入、删除节点) 1.查询     利用选择器找到要操作的节点之后,获得节点的值、属性值、文本以及html内容。     a,html()  --  html...
  • u011637069
  • u011637069
  • 2015-12-05 16:22:12
  • 716

(c#)XmlHelper

  • 2011年06月10日 11:40
  • 121KB
  • 下载

js中创建、添加、删除、移动、复制和查找(子)节点

1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement_x() //创建一个具体的元素 createTextNode() //创建一...
  • clearclearing
  • clearclearing
  • 2016-11-30 11:45:29
  • 1138

js节点属性的创建 添加 删除

//--------------------------节点的访问关系--------------------- //节点的访问关系是以属性形式存在 ...
  • gyq04551
  • gyq04551
  • 2016-11-20 17:13:45
  • 3207

js添加、移除、移动、复制、创建和查找节点

1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文...
  • sinat_38752382
  • sinat_38752382
  • 2017-08-11 15:49:15
  • 329

JQuery学习笔记(四)——创建、插入和删除节点

查找节点、增加节点、删除节点
  • u011499992
  • u011499992
  • 2016-07-31 22:26:35
  • 967

C# 实现单链表

  • 2014年03月24日 16:29
  • 40KB
  • 下载

二叉树的创建,节点删除,节点增加

// 二叉树.cpp : 定义控制台应用程序的入口点。 // /* *二叉树作业 *2012.12.1 13:55 *Made By Karld Vorn Doenitz */ #include "...
  • KarlDoenitz
  • KarlDoenitz
  • 2012-12-01 16:47:00
  • 8817
收藏助手
不良信息举报
您举报文章:创建节点(有添加,删除功能)
举报原因:
原因补充:

(最多只允许输入30个字)