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>
时间： 2024-10-10 05:42:25