1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset=utf-8 /> 5 <title>动态表格</title> 6 <!-- 增加表格头的样式 --> 7 <style type="text/css"> 8 #list th{ 9 background-color:#06F; 10 } 11 </style> 12 </head> 13 14 <body> 15 <table border="1" align="center" width="500PX"> 16 <thead> 17 <!-- 创建表格头 --> 18 <tr id="list"> 19 <th>选中</th> 20 <th>编号</th> 21 <th>姓名</th> 22 <th>密码</th> 23 <th>年龄</th> 24 <th>地址</th> 25 <th>操作</th> 26 </tr> 27 <!-- 添加全部删除按钮， --> 28 <tr> 29 <td ><input type="checkbox" onclick="checkAll(this)" /></td> 30 <td colspan="6" ><a href="javascript:void(0)" onclick="delAll()">全部删除</a></td> 31 </tr> 32 </thead> 33 <tbody id="listbody"></tbody> 34 </table> 35 <!-- 用于画一个横线 --> 36 <hr/> 37 <!-- 创建form表单 --> 38 <form > 39 <table align="center" border="1" width="300px"> 40 <tr> 41 <th >编号</th> 42 <td> <input type="text" id="id" /></td> 43 </tr> 44 <tr> 45 <th>姓名</th> 46 <td> <input type="text" id="name" /></td> 47 </th> 48 <tr> 49 <th>密码</th> 50 <td> <input type="text" id="pass" /></td> 51 </tr> 52 <tr> 53 <th>年龄</th> 54 <td> <input type="text" id="age" /></td> 55 </tr> 56 <tr> 57 <th>住址</th> 58 <td> <input type="text" id="address" /></td> 59 </tr> 60 <tr> 61 <td colspan="2" align="center"> 62 <input type="reset" value="重置" align="center" /> 63 <input type="button" value="添加" align="center" onclick="addlist()"/> 64 </td> 65 </tr> 66 67 </table> 68 69 </form> 70 71 </body> 72 <script type="text/javascript"> 73 function addlist(){ 74 //获取用户输入 75 var id=document.getElementById("id").value; 76 var name = document.getElementById("name").value; 77 var pass = document.getElementById("pass").value; 78 var age = document.getElementById("age").value; 79 var address = document.getElementById("address").value; 80 //在上面的列表中添加一行，把内容放在该行1 81 /* 82 <tr> 83 <td><input type="checkbox" name="item"/></td> 84 <td>1</td> 85 <td>张三</td> 86 <td>123456</td> 87 <td>20</td> 88 <td>广州天河</td> 89 <td><a href="javascript:void(0)" onclick="delOne(this)">删除</a></td> 90 javascript:void(0): 相当于让href属性失效！！ 91 </tr> 92 */ 93 //创建一个tr 94 var tr = document.createElement("tr"); 95 //创建td 96 var td1 = document.createElement("td"); 97 var input = document.createElement("input"); 98 input.setAttribute("type","checkbox"); 99 input.setAttribute("name","item"); 100 td1.appendChild(input); 101 102 var td2 = document.createElement("td"); 103 td2.innerHTML = id; 104 105 var td3 = document.createElement("td"); 106 td3.innerHTML = name; 107 108 var td4 = document.createElement("td"); 109 td4.innerHTML = pass; 110 111 var td5 = document.createElement("td"); 112 td5.innerHTML = age; 113 114 var td6 = document.createElement("td"); 115 td6.innerHTML = address; 116 117 var td7 = document.createElement("td"); 118 var a = document.createElement("a"); 119 120 a.setAttribute("href","javascript:void(0)");//相当于让href属性失效！ 121 a.setAttribute("onclick","delone(this)") 122 a.innerHTML = "删除"; 123 td7.appendChild(a); 124 //将创建的td添加到tr中 125 tr.appendChild(td1); 126 tr.appendChild(td2); 127 tr.appendChild(td3); 128 tr.appendChild(td4); 129 tr.appendChild(td5); 130 tr.appendChild(td6); 131 tr.appendChild(td7); 132 //使用appendChild（tr）方法，将tr添加到listbody中 133 //其中获取的listbody是要将表格添加的位置的id 134 var listbody = document.getElementById("listbody"); 135 listbody.appendChild(tr); 136 137 } 138 //删除单行 139 function delone(d){ 140 var tr = d.parentNode.parentNode; 141 var listbody = document.getElementById("listbody"); 142 listbody.removeChild(tr); 143 144 } 145 //全选 146 147 function checkAll(c){ 148 //得到全选按钮的状态 149 var status = c.checked; 150 //得到name=item的标签 151 var items = document.getElementsByName("item"); 152 for(var i=0;i<items.length;i++){ 153 //将全选按钮的状态给所有的items 154 items[i].checked=status; 155 156 } 157 } 158 //删除选中部分，注意变量，每删除一个，要将变量减一，否则，将导致变量溢出，浏览器死机 159 function delAll(){ 160 161 var list = document.getElementById("listbody"); 162 //拿到所有的item 163 var items = document.getElementsByName("item"); 164 for(var j=0;j<items.length;j++){ 165 166 if(items[j].checked)//如果item被选中 167 { 168 169 var tr = items[j].parentNode.parentNode; 170 list.removeChild(tr); 171 j--; 172 } 173 } 174 } 175 176 </script> 177 </html>