标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <style> 8 .content table{ 9 width:400px; 10 align:center; 11 border-collapse:collapse; 12 } 13 .tdWidth{width:100px} 14 .content td{text-align:center;} 15 </style> 16 <script> 17 var index=1; 18 var flag=1; 19 var edittds=undefined; 20 function getId(id){ 21 return document.getElementById(id); 22 } 23 function cre(tagName){ 24 return document.createElement(tagName); 25 } 26 function add(){ 27 var form=getId("form"); 28 if(form.style.display=="none"){ 29 form.style.display="block"; 30 }else{ 31 form.style.display="none"; 32 } 33 } 34 function addRow(){ 35 var name=getId("name"); 36 var sex=getId("sex"); 37 var age=getId("age"); 38 if(flag){ 39 var tr=cre("tr"); 40 tbody.appendChild(tr) 41 var td1=cre("td"); 42 tr.appendChild(td1); 43 var td2=cre("td"); 44 tr.appendChild(td2); 45 var td3=cre("td"); 46 tr.appendChild(td3); 47 var td4=cre("td"); 48 tr.appendChild(td4); 49 var td5=cre("td"); 50 tr.appendChild(td5); 51 var td6=cre("td"); 52 tr.appendChild(td6); 53 var checkBox=cre("input"); 54 td1.appendChild(checkBox); 55 checkBox.type="checkbox"; 56 td2.innerHTML=index++; 57 td3.innerHTML=name.value; 58 td4.innerHTML=sex.value; 59 td5.innerHTML=age.value; 60 var editBut=cre("button"); 61 td6.appendChild(editBut); 62 editBut.innerText="编辑"; 63 editBut.onclick=function(){ 64 edit(this); 65 } 66 var delBut=cre("button"); 67 td6.appendChild(delBut); 68 delBut.innerText="删除"; 69 delBut.onclick=function(){ 70 deleteOne(this); 71 } 72 }else{ 73 editRow(); 74 } 75 name.value=""; 76 sex.value="男"; 77 age.value=""; 78 } 79 function delRow(){ 80 var tbody=getId("tbody"); 81 var checkBoxs=tbody.getElementsByTagName("input"); 82 var trs=[]; 83 for(var i=0;i<checkBoxs.length;i++){ 84 if(checkBoxs[i].checked==true){ 85 trs.push(checkBoxs[i].parentNode.parentNode); 86 } 87 } 88 for(var j=0;j<trs.length;j++){ 89 tbody.removeChild(trs[j]); 90 } 91 } 92 function doCheckAll(){ 93 var thead=getId("thead"); 94 var CheckBox=thead.getElementsByTagName("input"); 95 var tbody=getId("tbody"); 96 var checkBoxs=tbody.getElementsByTagName("input"); 97 var len=checkBoxs.length 98 if(CheckBox[0].checked==true){ 99 for(i=0;i<len;i++){ 100 checkBoxs[i].checked=true; 101 } 102 }else{ 103 for(i=0;i<len;i++){ 104 checkBoxs[i].checked=false; 105 } 106 } 107 } 108 function deleteAllRow(){ 109 var tbody=getId("tbody"); 110 var checkBoxs=tbody.getElementsByTagName("input"); 111 var len=checkBoxs.length; 112 for(var i=0;i<len;i++){ 113 tbody.removeChild(checkBoxs[0].parentNode.parentNode); 114 } 115 } 116 function deleteOne(target){ 117 var tbody=getId("tbody"); 118 tbody.removeChild(target.parentNode.parentNode); 119 } 120 function edit(target){ 121 var tr=target.parentNode.parentNode; 122 var tds=tr.childNodes; 123 var name=getId("name"); 124 var sex=getId("sex"); 125 var age=getId("age"); 126 name.value=tds[2].innerHTML; 127 sex.value=tds[3].innerHTML; 128 age.value=tds[4].innerHTML; 129 flag=0; 130 edittds=tds; 131 } 132 function editRow(){ 133 var name=getId("name"); 134 var sex=getId("sex"); 135 var age=getId("age"); 136 edittds[2].innerHTML=name.value; 137 edittds[3].innerHTML=sex.value; 138 edittds[4].innerHTML=age.value; 139 edittds=undefined; 140 flag=1; 141 } 142 </script> 143 <body> 144 <div> 145 <button onclick="add()" type="button">添加</button> 146 <button onclick="delRow()" type="botton">删除</button> 147 <button onclick="deleteAllRow()" type="button">删除所有</button> 148 </div> 149 <form id="form" style="display:none;"> 150 <table> 151 <tr> 152 <td >姓名:</td> 153 <td><input id="name"></td> 154 </tr> 155 <tr> 156 <td >性别:</td> 157 <td> 158 <select id="sex"> 159 <option selected>男</option> 160 <option>女</option> 161 </select> 162 163 </select> 164 </td> 165 </tr> 166 <tr> 167 <td >年龄:</td> 168 <td><input id="age"></td> 169 </tr> 170 <tr> 171 <td><button type="button" onclick="addRow()">确定添加</button></td> 172 </tr> 173 <tr></tr> 174 </table> 175 </form> 176 <div class="content"> 177 <table border="1"> 178 <thead id="thead"> 179 <tr> 180 <th><input type="checkbox" onchange="doCheckAll()"></th> 181 <th>ID</th> 182 <th>姓名</th> 183 <th>性别</th> 184 <th>年龄</th> 185 <th colspan="2" class="tdWidth"> </th> 186 </tr> 187 <tr> </tr> 188 </thead> 189 <tbody id="tbody"></tbody> 190 </table> 191 </div> 192 </body> 193 </html>
标签：
原文地址：http://www.cnblogs.com/xiaomume/p/4713315.html
