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>