Javascript 节点操作,练习.

最新推荐文章于 2023-02-08 10:30:54 发布

wchb1990

最新推荐文章于 2023-02-08 10:30:54 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前台技术

本文链接：https://blog.youkuaiyun.com/wchb1990/article/details/40015877

前台技术专栏收录该内容

5 篇文章

订阅专栏

本文通过实例代码介绍了JavaScript如何进行DOM节点操作，包括增删改查等基本操作，是提升JavaScript前端开发技能的好练手项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 代码实现

<!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>Insert title here</title>
<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 响应函数, 使其也具备删除的功能. 
 *
 *.getElementById("employeetable")
 */
 
 window.onload = function(){
	 var aNodes = document.getElementsByTagName("a");	
	 for(var i=0;i<aNodes.length;i++){
	       aNodes[i].onclick = function(){
	           var trNode = this.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;
	       }
	 } 	 	
	 
	 document.getElementById("addEmpButton").onclick = function(){
	      var nameVal = document.getElementById("name").Value;
	      var emailVal = document.getElementById("email").value;
	      var salaryVal = document.getElementById("salary").value;

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

</script>
</head>
<body>

	<center>
		<br> <br> 添加新员工 <br> <br> name: <input type="text"
			name="name" id="name" />   email: <input type="text"
			name="email" id="email" />   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> </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>