您的位置：首页 > Web前端 > JavaScript

JavaScript实现表格的添加和删除

2016-08-30 11:20 459 查看

本文内容来自《11. 尚硅谷佟刚_JavaScript DOM编程添加删除节点的实验》视频教程，版权归期所有，仅作记录以备后查。效果如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></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 响应函数, 使其也具备删除的功能.
*
*
*/
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;
if((nameVal != "") && (emailVal != "") && (salaryVal != "")) {
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);

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);
}else {
alert("请输入用户信息！")
}

}
}

function trim(str) {
var reg = /^\s|\s*$/g;
return str.replace(reg, "");
}

</script>
<style type="text/css">
.content {
text-align: center;
}
</style>
</head>
<body>

<div class="content">
<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 align="center">
<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>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 表格操作 dom 节点添加删除

相关文章推荐

新的分享

章节导航