首先生成html、css样式
html代码如下:
<body>
<table id="employeeTable">
<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="deletEmp?id=001">delete</a></td>
</tr>
<tr>
<td>jm</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deletEmp?id=001">delete</a></td>
</tr>
<tr>
<td>pom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deletEmp?id=001">delete</a></td>
</tr>
</table>
name:<input type="text" id="empName"><br>
email:<input type="text" id="email"><br>
salary:<input type="text" id="salary"><br>
<button type="submit" id="addEmpButton">submit</button>
</body>
css代码如下:
<style>
table {
border-collapse: collapse;
margin-bottom: 100px;
width: 300px;
height: 100px;
}
th {
border: 1px solid red;
}
td {
border: 1px solid red;
height: 30px;
}
</style>
下面添加js代码进行添加删除操作:
<script>
// 删除事件,首先获取元素a我们需要点击a元素来删除指定的内容
let allA = document.getElementsByTagName('a');//获取a元素
// 利用for循环为每个链接绑定一个单击事件
for (let i = 0; i < allA.length; i++) {
allA[i].onclick = delA;//直接把delA这个函数拿过来
//delA是单独生成的一个函数方法能够节省大量重复代码,这里我们是直接把这个方法拿过来用
}
// 删除tr给a添加单击事件
function delA() {
// 点击超链接后要删除该行
// 获取tr
let tr = this.parentNode.parentNode;
// 获取要删除的员工名字这里需要获取name文本框的内容
let name = tr.getElementsByTagName('td')[0].innerHTML;
// 删除之前弹出一个提示框confirm()用于弹出一个带有确认和取消按钮的提示框
// 如果用户点击确认返回true;如果点击取消返回false
let fa = confirm('确认删除' + name + '吗');
// 判断用户点击确认,如果点击确认进入判断
if (fa) {
// 删除tr removeChild()
tr.parentNode.removeChild(tr);
}
//解决点击后跳转页面,默认行为可以利用响应函数最后return false取消默认
return false;
}
// 添加员工功能
// 点击submit按钮以后将员工的信息添加到表格中
// 这里第一步获取提交按钮
let addEmpButton = document.getElementById('addEmpButton');
// 给提交按钮绑定事件
addEmpButton.addEventListener('click', function () {
// 获取三个文本框内用户输入的值,也就是vlaue值;
let name = document.getElementById('empName').value;
let email = document.getElementById('email').value;
let salary = document.getElementById('salary').value;
//需要创建一个元素把用户输入 的内容添加到tr元素内
let tr = document.createElement('tr');
// 设置tr中内容这里直接利用innerHTML创建元素以及内容格式如下:
tr.innerHTML =
'<td>' + name + '</td>' +
'<td>' + email + '</td>' +
'<td>' + salary + '</td>' +
"<td><a href='javascript:;'>Delete</a></td>";
//因为超链接是固定值直接添加一个超链接给td
// 这里需要给超链接a绑定事件,所以先要获取tr内的a
let a = tr.getElementsByTagName('a')[0];
//这里是直接把点击事件另外生成了函数,直接a.onclick =delA这个函数方法,这里是赋值
a.onclick = delA;
// 我们前面生成了tr元素以及内容,这里需要把tr添加到tbody内,所以先要获取table然后获取tbody,这里的tbody是浏览器自动生成的我们没办法直接获取元素
let employeeTable = document.getElementById('employeeTable');//获取table
// 获取table中的tbody需要吧tr放到tbody里面
let tbody = employeeTable.getElementsByTagName('tbody')[0];//获取tbody元素因为getElementsByTagName返回的是一个数组所以我们需要利用索引来找到tbdoy;
// 这里我们获取到了tbody,把tr添加到tbody
tbody.appendChild(tr);//这里就完成了添加事件
});
</script>
具体的思路在代码注释中,可以仔细研究