1 用script实现添加、删除、修改、全选、反选、删除所选、删除全部。
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>动态表格</title>
6 <!--
7
8 <link rel="stylesheet" href="css/tablecss.css" type="text/css" />-->
9 <style>
10
11 body {
12 background-color: #ccc;
13 }
14 .show{
15 text-align: center;
16 }
17 .show span{
18 font-size: 50px;
19 font-weight: bold;
20 color: blue;
21 }
22 input{
23 width: 80px;
24 }
25
26 .show input[type="button"]{
27 width: 120px;
28 height: 40px;
29 background-color: blue;
30 font-size: 20px;
31 border: 0px solid;
32 border-radius: 5px;
33 cursor: pointer;
34 margin-top: 20px;
35 font-weight: bold;
36 color: white;
37 }
38 #t1{
39 width: 600px;
40 height: 40px;
41 border: 1px solid black;
42 border-spacing: 0px;
43 /*等价于表格中的cellspacing*/
44
45 margin-left: auto;
46 margin-right: auto;
47 }
48 #tb input[type="button"]{
49 width: 70px;
50 height: 30px;
51 font-size: 15px;
52 border-radius: 10px;
53 }
54 #t1 td{
55 border: 1px solid black;
56 padding: 5px;
57 text-align: center;
58 }
59
60 </style>
61 <script type="text/javascript" >
62
63 //工具函数
64 var $ = function(id) {
65 return document.getElementById(id);
66 }
67
68 var createObj = function(tagName) {
69 return document.createElement(tagName);
70 }
71 //添加
72 var addTr = function() {
73 //1.获得用户输入的内容
74 var nameTxt = $("i1").value;
75 var jobTxt = $('i2').value;
76 var salTxt = $('i3').value;
77 var timeTxt = $('i4').value;
78 //2.创建tr
79 var tr = createObj("tr");
80 //3.创建td
81 var checkTd = createObj("td");
82 var nameTd = createObj("td");
83 var jobTd = createObj("td");
84 var salTd = createObj("td");
85 var timeTd = createObj("td");
86 var dmlTd = createObj('td');
87
88 //4.将用户信息加入到指定的td中
89 var checkBtn = createObj('input');
90 checkBtn.type = "checkbox";
91 checkTd.appendChild(checkBtn);
92 nameTd.innerHTML = nameTxt;
93 jobTd.innerHTML = jobTxt;
94 salTd.innerHTML = salTxt;
95 timeTd.innerHTML = timeTxt;
96 //创建一个删除按钮
97 var delBtn = createObj("input");
98 delBtn.type = 'button';
99 delBtn.value = "删除";
100
101 // 为新建的btn添加事件监听属性
102
103 delBtn.onclick = function() {
104 delTr(this);
105 }
106 dmlTd.appendChild(delBtn);
107 //创建一个修改按钮
108 var modTrBtn = createObj("input");
109 modTrBtn.type = 'button';
110 modTrBtn.value = "修改";
111
112 // 为新建的btn添加事件监听属性
113
114 modTrBtn.onclick = function() {
115 modTr(this);
116 }
117 dmlTd.appendChild(modTrBtn);
118 //5.将新建的td加入到tr中
119 tr.appendChild(checkTd);
120 tr.appendChild(nameTd);
121 tr.appendChild(jobTd);
122 tr.appendChild(salTd);
123 tr.appendChild(timeTd);
124 tr.appendChild(dmlTd);
125
126 //6.将tr加入到body中
127 var tbody = $("tb");
128 tbody.appendChild(tr);
129 }
130 //删除
131 var delTr=function(obj){
132 var flag=window.confirm("确定删除？");
133 if(flag){
134 var tb=$('tb');
135 tb.removeChild(obj.parentNode.parentNode);
136 }
137 }
138 //删除全部
139 var delAll=function(){
140 var flag=window.confirm("确定删除全部？")
141 if(!flag){
142 return;
143 }
144 var tb=$('tb');
145 //获得tb下面的所有tr;
146 var trs=tb.getElementsByTagName('tr');
147 //将tr从tb逐条删除
148 for(var i=trs.length-1;i>=0;i--){
149 tb.removeChild(trs[i]);
150 }
151 }
152 //全选
153 var selAll=function(){
154 var tb=$('tb');
155 var inputs=tb.getElementsByTagName('input');
156 for(var i=0;i<inputs.length;i++){
157 var input=inputs[i];
158 if(input.type=="checkbox"){
159 input.checked='checked';
160 }
161 }
162 }
163 //反选
164 var oppsel=function(){
165 var tb=$('tb');
166 var inputs=tb.getElementsByTagName('input');
167 for(var i=0;i<inputs.length;i++){
168 var input=inputs[i];
169 if(input.checked==true){
170 input.checked='';
171 }
172 else{
173 input.checked='checked';
174 }
175 }
176 }
177 //删除所选
178 var delSel = function() {
179 //1.获得tbody
180 var tbody = $("tb");
181 //2.获得tbody里面的tr
182 var trs = tbody.getElementsByTagName("tr");
183 //3.获得tr里的第一个td
184 for (var i = trs.length; i > 0; i--) {
185 var tds = trs[i - 1].getElementsByTagName("input");
186 for (var j = 0; j < tds.length; j++) {
187 if (tds[j].type == "checkbox") {
188 if (tds[j].checked == true) {
189 tbody.removeChild(trs[i - 1]);
190 }
191 }
192 }
193 }
194 }
195 //修改
196 var modTr = function(obj){
197 //1.获得隐藏的div
198 var overDiv = $('over');
199 //2.将display的值由hidden改为block
200 overDiv.style.display = "block";
201 /**
202 * 控制遮罩层的宽度
203 * */
204 var w = window.innerWidth;
205 var h = window.innerHeight;
206 // console.log("w"+w+",h"+h);
207 overDiv.style.width=w+'px';
208 overDiv.style.height=h+'px'
209 /*遮罩层的内部的div垂直居中*/
210 var child_over =$("over_child");
211 var middle = Math.floor((h-300)/2);
212 child_over.style.top = middle+"px";
213 //3.通过按钮获得tr
214 var tr =obj.parentNode.parentNode;
215 //tr.cells:获得者一行中的所有的td
216 var nameTxt = tr.cells[1].innerHTML;
217 var jobTxt = tr.cells[2].innerHTML;
218 var salTxt = tr.cells[3].innerHTML;
219 var dateTxt = tr.cells[4].innerHTML;
220 //4.获得遮罩层中的tbody
221 var tb = $("over_tb");
222 //5.获得tb中的所有的input
223 var inputs =tb.getElementsByTagName('input');
224 inputs[0].value = nameTxt;
225 inputs[1].value = jobTxt;
226 inputs[2].value = salTxt;
227 inputs[3].value = dateTxt;
228 }
229
230 /*
231 * 取消按钮
232 */
233 var cancelBtn = function(){
234 //1.获得隐藏的div
235 var overDiv = $('over');
236 overDiv.style.display = 'none';
237 }
238
239 /*
240 * 确认修改
241 */
242
243 var okBtn = function(){
244 //1.获得遮罩层中的tbody
245 var over_tb = $('over_tb');
246 //2.获得tb中的所有的input
247 var inputs = over_tb.getElementsByTagName('input');
248 nameTxt=inputs[0].value;
249 jobTxt= inputs[1].value ;
250 salTxt= inputs[2].value ;
251 dateTxt=inputs[3].value;
252 //隐藏遮罩层
253 cancelBtn();
254 //3.获得主页中的数据
255 var tb = $("tb");
256 //获得所有的行
257 var rows = tb.rows.length;
258 for(var i = 0;i<rows;i++){
259 var tr = tb.rows[i];
260 if(tr.cells[1].innerHTML = nameTxt){
261 if(tr.cells[2].innerHTML!=jobTxt){
262 tr.cells[2].innerHTML=jobTxt;
263 tr.cells[2].className = 'modiyInfo';
264 }
265 if(tr.cells[3].innerHTML!=salTxt){
266 tr.cells[3].innerHTML=salTxt;
267 tr.cells[3].className = 'modiyInfo';
268 }
269 if(tr.cells[4].innerHTML!=dateTxt){
270 tr.cells[4].innerHTML=dateTxt;
271 tr.cells[4].className = 'modiyInfo';
272 }
273 }
274 }
275
276 }
277 </script>
278 </head>
279 <body>
280 <p class="show">
281 <span>动态表格</span>
282 <br />
283 姓名<input id="i1" type="text"/>
284 职位
285 <select id="i2">
286 <option>研发</option>
287 <option>测试</option>
288 <option>实施</option>
289 <option>前台</option>
290 </select>
291 工资
292 <input id="i3" type="text"/>
293 入职时间
294 <input id="i4" type="text"/>
295 <br />
296 <input type="button" value="添加" onclick="addTr();"/>
297 </p>
298 <hr>
299 <table id="t1">
300 <tr>
301 <td>选择</td>
302 <td>姓名</td>
303 <td>职位</td>
304 <td>工资</td>
305 <td>入职时间</td>
306 <td>操作</td>
307 </tr>
308 <tbody id="tb">
309 <tr>
310 <td>
311 <input type="checkbox" />
312 </td>
313 <td>haoren</td>
314 <td>研发</td>
315 <td>4000</td>
316 <td>2011-10</td>
317 <td>
318 <input type='button' value="删除" onclick="delTr(this);" />
319 <input type='button' value="修改" onclick="modTr(this);"/>
320 </td>
321 </tr>
322 <tr>
323 <td>
324 <input type="checkbox" />
325 </td>
326 <td>boss</td>
327 <td>前台</td>
328 <td>2000</td>
329 <td>2010-10</td>
330 <td>
331 <input type='button' value="删除"onclick="delTr(this);" />
332 <input type='button' value="修改" onclick="modTr(this);"/>
333 </td>
334 </tr>
335 </tbody>
336 </table>
337 <hr />
338 <p class="show">
339 <input type="button" value="全选 " onclick="selAll();" />
340 <input type="button" value="反选 " onclick="oppsel()"/>
341 <input type="button" value="删除所选 " onclick="delSel();"/>
342 <input type="button" value="全部删除 "onclick="delAll();" />
343 </p>
344
345 <div id="over" style="display: none;">
346 <div id="over_child">
347 <p>修改用户信息</p>
348 <table>
349 <tbody id="over_tb">
350 <tr>
351 <td>用户名</td>
352 <td><input type="text"disabled/></td>
353 </tr>
354 <tr>
355 <td>职位</td>
356 <td><input type="text"/></td>
357 </tr>
358 <tr>
359 <td>工资</td>
360 <td><input type="text"/></td>
361 </tr>
362 <tr>
363 <td>入职时间</td>
364 <td><input type="text"/></td>
365 </tr>
366 </tbody>
367 <tr >
368 <td colspan="2">
369 <input type="button"value="取消"onclick="cancelBtn();">
370 <input type="button"value="确认"onclick="okBtn();">
371 </td>
372 </tr>
373 </table>
374 </div>
375 </div>
376 </body>
377 </html>
