JS-案例-增加和删除节点

最新推荐文章于 2024-03-19 03:44:32 发布

a_worm

最新推荐文章于 2024-03-19 03:44:32 发布

阅读量2.2k

点赞数

分类专栏：技能-前台文章标签： javaScript DOM 增加和删除节点

本文链接：https://blog.csdn.net/cuigaochong/article/details/48194039

版权

技能-前台专栏收录该内容

17 篇文章 0 订阅

订阅专栏

需求：

* 为 #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 响应函数, 使其也具备删除的功能.

实现代码：

<!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">
	//增加和删除Tr
	window.onload = function()
	{
		var aNodes = document.getElementById("employeetable").getElementsByTagName("a");
		for(var i=0;i<aNodes.length;i++)
		{
			aNodes[i].onclick = function()
			{
					removeTr(this);
					return false;
			};
		}
		
		//删除tr
		function removeTr(aNode)
		{
				var trNode = aNode.parentNode.parentNode;
				var textContent = trNode.getElementsByTagName("td")[0].firstChild.nodeValue;
				textContent = trim(textContent);
				alert(textContent);
				
				var flag = confirm("确认要删除"+textContent+"？");
				if(flag)
				{
					trNode.parentNode.removeChild(trNode);
				}
				return false;
		}
		
		var btn = document.getElementById("addEmpButton");
		//设置增加tr按钮的监听，实现增加tr
		btn.onclick = function()
		{
			var nameVal = document.getElementById("name").value;
			var emaliVal = document.getElementById("email").value;
			var salaryVal = document.getElementById("salary").value;
			
			var nameTd = document.createElement("td");
			nameTd.appendChild(document.createTextNode(nameVal));
			
			var emaliTd = document.createElement("td");
			emaliTd.appendChild(document.createTextNode(emaliVal));
			
			var salaryTd = document.createElement("td");
			salaryTd.appendChild(document.createTextNode(salaryVal));
			
			var tr = document.createElement("tr");
			
			tr.appendChild(nameTd);
			tr.appendChild(emaliTd);
			tr.appendChild(salaryTd);
			
			var aNode = document.createElement("a");
			aNode.href = "deleteEmp?id=xxx";
			aNode.appendChild(document.createTextNode("delete"));
			var aTd = document.createElement("td");
			
			//为增添的tr的Delete增加删除事件
			aNode.onclick = function()
			{
				removeTr(this);
				return false;
			};
			
			aTd.appendChild(aNode);
			
			tr.appendChild(aTd);
			//增加tr
			document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(tr);
			
		};
		
	
	};
	//去除前后空格
	function trim(str)
	{
		var reg = /^\s*|\s*$/g;
		return str.replace(reg,"");
	}


</script>

</head>
<body>

</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>

</html>

a_worm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-案例-增加和删除节点

需求： /* * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数: * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的 * 第一个 td 子节点的文本值, 且要去除前后空格. * 2. 若点击 "确认" , 则删除 a 节点的所在的行 * * 注意: * 1. a 节点
复制链接

扫一扫