表单动态生成表格
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 border-collapse:collapse; 11 } 12 .tdWidth{width:100px} 13 .content td{text-align:center;} 14 </style> 15 <script> 16 var index=1; //初始化ID 17 var flag=1; //判断执行新添还是编辑功能 18 var edittds="";//临时保存操作行的变量 19 function getId(id){ 20 return document.getElementById(id); 21 } 22 function cre(tagName){ 23 return document.createElement(tagName); 24 } 25 function add(){ 26 var form=getId("form"); 27 if(form.style.display=="none"){ 28 form.style.display="block"; 29 }else{ 30 form.style.display="none"; 31 } 32 } 33 function addRow(){ 34 var name=getId("name"); 35 var sex=getId("sex"); 36 var age=getId("age"); 37 if(flag){ 38 var tr=cre("tr"); 39 tbody.appendChild(tr) 40 var td1=cre("td"); 41 tr.appendChild(td1); 42 var td2=cre("td"); 43 tr.appendChild(td2); 44 var td3=cre("td"); 45 tr.appendChild(td3); 46 var td4=cre("td"); 47 tr.appendChild(td4); 48 var td5=cre("td"); 49 tr.appendChild(td5); 50 var td6=cre("td"); 51 tr.appendChild(td6); 52 var checkBox=cre("input"); 53 td1.appendChild(checkBox); 54 checkBox.type="checkbox"; 55 td2.innerHTML=index++; 56 td3.innerHTML=name.value; 57 td4.innerHTML=sex.value; 58 td5.innerHTML=age.value; 59 var editBut=cre("button"); 60 td6.appendChild(editBut); 61 editBut.innerText="编辑"; 62 editBut.onclick=function(){ //添加事件函数(带参数) 63 edit(this); 64 } 65 var delBut=cre("button"); 66 td6.appendChild(delBut); 67 delBut.innerText="删除"; 68 delBut.onclick=deleteOne; //添加事件函数(不带参数) 69 }else{ 70 editRow(); 71 } 72 name.value=""; 73 sex.value="男"; 74 age.value=""; 75 } 76 function delRow(){ 77 var tbody=getId("tbody"); 78 var checkBoxs=tbody.getElementsByTagName("input"); 79 var trs=[]; 80 for(var i=0;i<checkBoxs.length;i++){ 81 if(checkBoxs[i].checked==true){ 82 trs.push(checkBoxs[i].parentNode.parentNode); //保存选中的行 83 } 84 } 85 for(var j=0;j<trs.length;j++){ 86 tbody.removeChild(trs[j]); //删除选中的行,不是trs[0] 87 } 88 } 89 function doCheckAll(){ 90 var thead=getId("thead"); 91 var CheckBox=thead.getElementsByTagName("input"); 92 var tbody=getId("tbody"); 93 var checkBoxs=tbody.getElementsByTagName("input"); 94 var len=checkBoxs.length 95 if(CheckBox[0].checked==true){ 96 for(i=0;i<len;i++){ 97 checkBoxs[i].checked=true; 98 } 99 }else{ 100 for(i=0;i<len;i++){ 101 checkBoxs[i].checked=false; 102 } 103 } 104 } 105 function deleteAllRow(){ 106 var tbody=getId("tbody"); 107 var checkBoxs=tbody.getElementsByTagName("input"); //标签集合 108 var len=checkBoxs.length; 109 for(var i=0;i<len;i++){ 110 tbody.removeChild(checkBoxs[0].parentNode.parentNode); //单个input标签的父级的父级就是行 111 } 112 } 113 function deleteOne(){ 114 var tbody=getId("tbody"); 115 tbody.removeChild(this.parentNode.parentNode); //函数不传参数 116 } 117 function edit(target){ //函数传参数 118 var tr=target.parentNode.parentNode; 119 var tds=tr.childNodes; 120 var name=getId("name"); 121 var sex=getId("sex"); 122 var age=getId("age"); 123 name.value=tds[2].innerHTML; 124 sex.value=tds[3].innerHTML; 125 age.value=tds[4].innerHTML; 126 flag=0; 127 edittds=tds; //保存操作行的数据 128 } 129 function editRow(){ 130 var name=getId("name"); 131 var sex=getId("sex"); 132 var age=getId("age"); 133 edittds[2].innerHTML=name.value; 134 edittds[3].innerHTML=sex.value; 135 edittds[4].innerHTML=age.value; 136 edittds=""; //置空 137 flag=1; 138 } 139 </script> 140 <body> 141 <div> 142 <button onclick="add()" type="button">添加</button> 143 <button onclick="delRow()" type="botton">删除</button> 144 <button onclick="deleteAllRow()" type="button">删除所有</button> 145 </div> 146 <form id="form" style="display:none;"> 147 <table> 148 <tr> 149 <td >姓名:</td> 150 <td><input id="name"></td> 151 </tr> 152 <tr> 153 <td >性别:</td> 154 <td> 155 <select id="sex"> 156 <option selected>男</option> 157 <option>女</option> 158 </select> 159 160 </select> 161 </td> 162 </tr> 163 <tr> 164 <td >年龄:</td> 165 <td><input id="age"></td> 166 </tr> 167 <tr> 168 <td><button type="button" onclick="addRow()">确定添加</button></td> 169 </tr> 170 <tr></tr> 171 </table> 172 </form> 173 <div class="content"> 174 <table border="1"> 175 <thead id="thead"> 176 <tr> 177 <th><input type="checkbox" onchange="doCheckAll()"></th> 178 <th>ID</th> 179 <th>姓名</th> 180 <th>性别</th> 181 <th>年龄</th> 182 <th colspan="2" class="tdWidth"> </th> 183 </tr> 184 <tr> </tr> 185 </thead> 186 <tbody id="tbody"></tbody> 187 </table> 188 </div> 189 </body> 190 </html>