表单动态生成表格

最新推荐文章于 2024-03-28 11:27:45 发布
三叔的负能量
最新推荐文章于 2024-03-28 11:27:45 发布
阅读量170
点赞数
原文链接：http://www.cnblogs.com/xiaomume/p/4717327.html
版权
  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">&nbsp;</th>
183                 </tr>
184                 <tr>&nbsp;</tr>
185             </thead>
186             <tbody id="tbody"></tbody>
187         </table>
188     </div>
189 </body>
190 </html>
View Code
转载于:https://www.cnblogs.com/xiaomume/p/4717327.html
三叔的负能量
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单动态生成表格

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <style> 8 .c...
复制链接

扫一扫