给一个表格
用js实现：
1.点击delete后跳出确认框，确认则删除本行，取消则不删除；
2，在想添加员工的表格中输入信息，点击提交按钮，员工信息自动加入第一个表格。
3，第一表格中新添加的员工信息也要有delete和确认功能。
第1个功能：
分析：delete是超链接，所以我们要绑定的是表一的所有超链接，但要删除的是超链接所在的行tr；a的父亲的父亲的是tr，然后tr自己删除自己
window.onload = function () {
// 分析：delete是超链接，所以我们要绑定的是表一的所有超链接，
// 但删除的是超链接所在的行tr，a的父亲的父亲的是tr，然后tr自己删除自己；
// 获取所有超链接
var allA = document.getElementsByTagName("a");
// 为每个超链接绑定一个单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
// 此时会有a的默认行为
// 要取消a的默认行为:
// 1.return false
// 2在a的href中设置"javascript:;"
// alert(this);
var tr = this.parentNode.parentNode;
// 在确认框里设置确认删除xx名字吗？
// 怎么把名字传递进去
// 名字是每个tr的第一个td的文本属性!!
var name = tr.getElementsByTagName("td")[0].innerHTML;
var con = confirm("确定删除" + name + "?");
if (con) {
// -------删除自己，父亲的儿子是自己
tr.parentNode.removeChild(tr);
}
};
}
第2个功能：
分析：要添加的，其实是一行，要包括标签的结构和标签的文本；要做出结构，做出文本，并把文本放入相应标签中，最后整体放入。
1.获取用户填写的信息(3个)
2.创建结构，一行4个单元格,还有超链接
3.标签结构搭建好了，创建文本节点
4.套娃
（1）把文本节点放入td中
（2）a放入td中
（3）将td放入tr中
// 单击提交，将员工的所有属性添加到表格中
// 为按钮绑定一个单击响应函数
var submit = document.getElementById("submit");
submit.onclick = function () {
// 1.获取用户填写的信息(3个)
var Name = document.getElementById("Name").value;
var Email = document.getElementById("Email").value;
var Salary = document.getElementById("Salary").value;
// 将获得到的信息保存到tr中。所以要创建一个类似以下的结构
// <tr>
// <td>linlinlin</td>
// <td>[email protected]</td>
// <td>10000</td>
// <td>
// <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Delete</a>
// </td>
// </tr>
// 2.创建结构，一行4个单元格,还有一个超链接
var tr = document.createElement("tr");
var Nametd = document.createElement("td");
var Emailtd = document.createElement("td");
var Salarytd = document.createElement("td");
var atd = document.createElement("td");
// 创建a标签
var a = document.createElement("a");
// 3.标签结构搭建好了，创建文本节点
var NameText = document.createTextNode(Name);
var EmailText = document.createTextNode(Email);
var SalaryText = document.createTextNode(Salary);
var deText = document.createTextNode("Delete");
// 4.套娃
// （1）把文本节点放入td中
Nametd.appendChild(NameText);
Emailtd.appendChild(EmailText);
Salarytd.appendChild(SalaryText);
// （2）a放入td中
a.appendChild(deText);
a.href = "javascript:;";
atd.appendChild(a);
//（3）将td放入tr中
tr.appendChild(Nametd);
tr.appendChild(Emailtd);
tr.appendChild(Salarytd);
tr.appendChild(atd);
整个结构内容已经准备好，将整个结构其放入表格中，怎么放，整体被包括在tr中，所以tr放入表格即可
var firstTable = document.getElementById("firstTable");
// getElementsByTagNam加索引;e是数组，要[0]
firstTable.appendChild(tr);
var tbody = firstTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
};
但是，新加的信息，单击Delete后没有反应，不删除？
为什么？
因为删除功能的函数在页面刷新加载完了，而添加的信息是在加载完后添加的。
那就为新添加的a绑定删除功能吧，加上函数就好。
因为删除是一样的函数，设置成一个函数，来调用就好。
function del(){
var allA = document.getElementsByTagName("a");
// 为每个超链接绑定一个单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
var tr = this.parentNode.parentNode;
var name = tr.getElementsByTagName("td")[0].innerHTML;
var con = confirm("确定删除" + name + "?");
if (con) {
// -------删除自己，父亲的儿子是自己
tr.parentNode.removeChild(tr);
}
};
}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
window.onload = function () {
function del(){
var allA = document.getElementsByTagName("a");
// 为每个超链接绑定一个单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
var tr = this.parentNode.parentNode;
var name = tr.getElementsByTagName("td")[0].innerHTML;
var con = confirm("确定删除" + name + "?");
if (con) {
// -------删除自己，父亲的儿子是自己
tr.parentNode.removeChild(tr);
}
};
}
}
// 分析：delete是超链接，所以我们要绑定的是表一的所有超链接，
// 但删除的是超链接所在的行tr，a的父亲的父亲的是tr，然后tr自己删除自己；
// 获取所有超链接
// --------------------------------------------------------------------------------------
// 单击提交，将员工的所有属性添加到表格中
// 为按钮绑定一个单击响应函数
var submit = document.getElementById("submit");
submit.onclick = function () {
// 1.获取用户填写的信息(3个)
var Name = document.getElementById("Name").value;
var Email = document.getElementById("Email").value;
var Salary = document.getElementById("Salary").value;
// 将获得到的信息保存到tr中。所以要创建一个类似以下的结构
// <tr>
// <td>linlinlin</td>
// <td>[email protected]</td>
// <td>10000</td>
// <td>
// <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Delete</a>
// </td>
// </tr>
// 2.创建结构，一行4个单元格,还有一个超链接
var tr = document.createElement("tr");
var Nametd = document.createElement("td");
var Emailtd = document.createElement("td");
var Salarytd = document.createElement("td");
var atd = document.createElement("td");
// 创建a标签
var a = document.createElement("a");
// 3.标签结构搭建好了，创建文本节点
var NameText = document.createTextNode(Name);
var EmailText = document.createTextNode(Email);
var SalaryText = document.createTextNode(Salary);
var deText = document.createTextNode("Delete");
// 4.套娃
// （1）把文本节点放入td中
Nametd.appendChild(NameText);
Emailtd.appendChild(EmailText);
Salarytd.appendChild(SalaryText);
// （2）a放入td中
a.appendChild(deText);
a.href = "javascript:;";
atd.appendChild(a);
// （3）将td放入tr中
tr.appendChild(Nametd);
tr.appendChild(Emailtd);
tr.appendChild(Salarytd);
tr.appendChild(atd);
// ------------------上面函数绑定的a的delete功能是页面刷新就加载完了，再添加进去的，没有加载没有delete功能，
// 所以，要为新的a绑定一次单击响应函数
a.onclick = del;
// 整个结构内容已经准备好，将整个结构其放入表格中，怎么放，整体被包括在tr中，所以tr放入表格即可
var table = document.getElementById("firstTable");
// getElementsByTagNam加索引;e是数组，要[0]
firstTable.appendChild(tr);
var tbody = firstTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
// alert(Name+Email+Salary);
};
};
</script>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid greenyellow;
}
</style>
</head>
<body>
<table border="1" id="firstTable">
<!-- 页面会默认地添加tbody属性 -->
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>linlinlin</td>
<td>123@.com</td>
<td>10000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>kkkkk</td>
<td>123456@.com</td>
<td>1000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>ooooo</td>
<td>99999999@.com</td>
<td>88000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
</table>
<table>
<caption>
添加新员工
</caption>
<tr>
<td>Name</td>
<td>
<input id="Name" name="Name" type="text" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input id="Email" name="Email" type="text" />
</td>
</tr>
<tr>
<td>Salary</td>
<td>
<input id="Salary" name="Salary" type="text" />
</td>
</tr>
<tr>
<td><input type="submit" value="提交" id="submit" /></td>
</tr>
</table>
</body>
</html>
结果：
