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

最新推荐文章于 2024-05-29 00:30:00 发布

穆埙

最新推荐文章于 2024-05-29 00:30:00 发布

阅读量999

点赞数

分类专栏： Jsp技术+servlet

Jsp技术+servlet 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种在HTML页面上实现表格数据动态增删的方法。具体包括：为表格中的删除链接添加点击事件，弹出确认框后删除指定行；新增记录时动态创建表格行与单元格，并添加删除功能。

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

需求：

* 为 #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>