11_JavaScript_DOM编程_添加删除节点的实验

Posted on In Views:

本节主要做一个实现添加和删除行的操作的练习……

代码如下：

ex-5.jsp:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除操作</title>
<script type="text/javascript">
	window.onload = function(){
		var addButton = document.getElementsByName("addButton")[0];
		
		var nameInputNode = document.getElementsByName("name")[0];
		var emailInputNode = document.getElementsByName("email")[0];
		var salaryInputNode = document.getElementsByName("salary")[0];
		
		addButton.onclick = function(){
			nameVal = nameInputNode.value;
			emailVal = emailInputNode.value;
			salaryVal = salaryInputNode.value;
			
			var nameCleanVal = DeleteEmpty(nameVal);
			var emailCleanVal = DeleteEmpty(emailVal);
			var salaryCleanVal = DeleteEmpty(salaryVal);
			
			//alert("-"+nameCleanVal+"-");
			
			if(nameCleanVal == undefined || nameCleanVal == ""){
				nameInputNode.value = "";
				alert("请输入姓名！");
			}else if(emailCleanVal == undefined || emailCleanVal == ""){
				emailInputNode.value = "";
				alert("请输入email！");
			}else if(salaryCleanVal == undefined || salaryCleanVal == ""){
				salaryInputNode.value = "";
				alert("请输入工资！");
			}else{
				var tableNode = document.getElementById("table");
				
				var trNode = document.createElement("tr");
				
				var tdNode1 = document.createElement("td");
				var tdNode2 = document.createElement("td");
				var tdNode3 = document.createElement("td");
				var tdNode4 = document.createElement("td");
				
				var textNode1 = document.createTextNode(nameCleanVal);
				var textNode2 = document.createTextNode(emailCleanVal);
				var textNode3 = document.createTextNode(salaryCleanVal);
				var textNode4 = document.createTextNode("delete");
				
				var deleteNode = document.createElement("delete");
				var fontNode = document.createElement("font");
				fontNode.color = "blue";
				deleteNode.appendChild(textNode4);
				fontNode.appendChild(deleteNode);
				
				tdNode1.appendChild(textNode1);
				tdNode2.appendChild(textNode2);
				tdNode3.appendChild(textNode3);
				tdNode4.appendChild(fontNode);
				
				trNode.appendChild(tdNode1);
				trNode.appendChild(tdNode2);
				trNode.appendChild(tdNode3);
				trNode.appendChild(tdNode4);
				
				//为trNode添加index属性：
				var trNodeOthers = document.getElementsByTagName("tr");
				trNode.index = trNodeOthers.length;
				//alert("新建行的index为："+trNode.index);
				
				tableNode.appendChild(trNode);
				
				//为deleteNode添加行为：
				deleteNode.onclick = function(){
					deleteRow(trNodeOthers, this.parentNode.parentNode.parentNode.index, nameCleanVal);
				}
			}
		}
		
 		var trNode = document.getElementsByTagName("tr");
		setIndex(trNode);
		
		//按delete之后的效果：
		var deleteNode = document.getElementsByTagName("delete");
		for(var i=0; i<deleteNode.length; i++){
			deleteNode[i].onclick = function(){
				//alert("1");
				//显示在第几行
				//alert("1");
				//alert(this.parentNode.parentNode.parentNode.childNodes[1].firstChild.nodeValue);
				nameMessage = this.parentNode.parentNode.parentNode.childNodes[1].firstChild.nodeValue;
				deleteRow(trNode, this.parentNode.parentNode.parentNode.index, nameMessage);
			}
		}
		
		/* var trNode = document.getElementsByTagName("tr");
		trNode[1].parentNode.removeChild(trNode[1]);
		
		alert(trNode.length); */
	}
	
	//
	function deleteRow(trNode, row, nameMessage){
		if(confirm("确认删除"+nameMessage+"的信息吗？")){
			trNode[row].parentNode.removeChild(trNode[row]);
			setIndex(trNode);
		}
	}
	
	//设置index
	function setIndex(trNode){
		for(var i=0; i<trNode.length; i++){
			trNode[i].index = i;
		}
	}
	
	function DeleteEmpty(string){
		if(string.length>0){
			for(var i=0; i<string.length; i++){
				if(!(string.slice(i,i+1)==" ")){
					string = string.slice(i, string.length);
					break;
				}
			}
			for(var i=string.length-1; i>=0; i--){
				if(!(string.slice(i, i+1)==" ")){
					string = string.slice(0, i+1);
					break;
				}
			}
			if(i==-1){
				string = "";
			}
			return string;
		}
	}
</script>
</head>
<body>
	<br />
	<br />
	<center>添加新员工</center>
	<br />
	<br />
	<center>
		name:<input type="text" name="name" /> &nbsp;&nbsp;&nbsp; 
		email:<input type="text" name="email" /> &nbsp;&nbsp;&nbsp; 
		salary:<input type="text" name="salary" /> &nbsp;&nbsp;&nbsp;
		<input type="button" name="addButton" value="add">
	</center>
	<br />
	<br />
	<hr />
	<br />
	<br />
	<center>
		<table id="table" border="1" cellspacing="0">
			<tr>
				<th width="100">name</th>
				<th width="300">email</th>
				<th width="100">salary</th>
				<th width="50"></th>
			</tr>
			<tr>
				<td>jane</td>
				<td>811632341@qq.com</td>
				<td>5000</td>
				<td><font color="blue"><delete>delete</delete></font></td>
			</tr>
			<tr>
				<td>kangkang</td>
				<td>13220283157@139.com</td>
				<td>6000</td>
				<td><font color="blue"><delete>delete</delete></font></td>
			</tr>
			<tr>
				<td>michacel</td>
				<td>17184023578@163.com</td>
				<td>8000</td>
				<td><font color="blue"><delete>delete</delete></font></td>
			</tr>
		</table>
	</center>
</body>
</html>






<!-- 

<script type="text/javascript">

/*
 * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
 * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
 * 第一个 td 子节点的文本值, 且要去除前后空格.
 * 2. 若点击 "确认" , 则删除 a 节点的所在的 行
 *
 * 注意:
 * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
 * 2. tr 的直接父节点为 tbody, 而不是 table
 * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数. 
 *
 * 为 #addEmpButton 添加 onclick 响应函数:
 * 1. 获取 #name, #email, #salary 的文本框的值
 * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
 *    节点价位 tr 节点的子节点
    <tr>
		<td>Tom</td>
		<td>tom@tom.com</td>
		<td>5000</td>
	</tr>
 * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td> 
 * 4. 把 3 创建的 td 也加为 tr 的子节点. 
 * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
 * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能. 
 *
 *
 */
 
 window.onload = function(){
	 
	 function removeTr(aNoe){
		 
		 var trNode = aNoe.parentNode.parentNode;
		 
		 var textContent = trNode.getElementsByTagName("td")[0]
		                         .firstChild.nodeValue;
		 textContent = trim(textContent);
		 
		 var flag = confirm("确定要删除" + textContent + "的信息吗?");
		 if(flag){
			 trNode.parentNode.removeChild(trNode);
		 }
		 
		 return false;
	 }
	 
	 var aNodes = document.getElementById("employeetable")
	                      .getElementsByTagName("a");
	 for(var i = 0; i < aNodes.length; i++){
		 aNodes[i].onclick = function(){
			 removeTr(this);			 
			 return false;
		 }
	 }
	 
	 document.getElementById("addEmpButton").onclick = function(){
		 
		 var nameVal = document.getElementById("name").value;
		 var emailVal = document.getElementById("email").value;
		 var salaryVal = document.getElementById("salary").value;
		 
		 var nameTd = document.createElement("td");
		 nameTd.appendChild(document.createTextNode(nameVal));

		 var emailTd = document.createElement("td");
		 emailTd.appendChild(document.createTextNode(emailVal));
		 
		 var salaryTd = document.createElement("td");
		 salaryTd.appendChild(document.createTextNode(salaryVal));
		 
		 var tr = document.createElement("tr");
		 
		 tr.appendChild(nameTd);
		 tr.appendChild(emailTd);
		 tr.appendChild(salaryTd);
		 
		 alert("aa");
		 
		 //<td><a href="deleteEmp?id=xxx">Delete</a></td>
		 var aNode = document.createElement("a");
		 aNode.href = "deleteEmp?id=xxx";
		 aNode.appendChild(document.createTextNode("Delete"));
		 var aTd = document.createElement("td");
		 aTd.appendChild(aNode);
		 
		 tr.appendChild(aTd);
		 
		 aNode.onclick = function(){
			 removeTr(this);			 
			 return false;
		 }
		 
		 document.getElementById("employeetable")
		         .getElementsByTagName("tbody")[0]
		         .appendChild(tr);
		 
		 //value: 用于获取 html 表单元素的值
		 //alert(this.value); //
		 //nodeValue: 用于获取文本节点的文本值. 
		 //alert(this.nodeValue); //null
		 
	 }
	 
	 function trim(str){
		 var reg = /^\s*|\s*$/g;
		 return str.replace(reg, "");
	 }
	 
 }

</script>
</head>
<body>

	<center>
		<br> <br> 添加新员工 <br> <br> name: <input type="text"
			name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
			name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
			name="salary" id="salary" /> <br> <br>
		<button id="addEmpButton" value="abc">Submit</button>
		<br> <br>
		<hr>
		<br> <br>
		<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
			<tbody>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>&nbsp;</th>
				</tr>
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="deleteEmp?id=001">Delete</a></td>
				</tr>
				<tr>
					<td>
						Jerry
					</td>
					<td>jerry@sohu.com</td>
					<td>8000</td>
					<td><a href="deleteEmp?id=002">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>bob@tom.com</td>
					<td>10000</td>
					<td><a href="deleteEmp?id=003">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>

</body>
</html> -->