要实现表格添加按钮的功能:
- 为按钮添加绑定单击事件
- 创建行元素
- 创建单元格元素
- 将单元格元素添加到行元素中
- 获取文本框内的内容
- 创建相应的文本元素
- 把文本元素添加到单元格元素里
- 创建删除功能的超链接元素
- 将超链接元素添加到单元格里
- 获取table元素,将行元素添加到table里
要实现删除功能:
- 为每个删除超链接添加单击事件
- 获取table元素
- 获取行元素
- 通过table元素删除行元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态表格test</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text", id="name", placeholder="请输入姓名", autocomplete="off">
<input type="text", id="age", placeholder="请输入年龄", autocomplete="off">
<input type="text", id="sex", placeholder="请输入性别", autocomplete="off">
<input type="button", value="添加", id="add">
</div>
<table id = "tb">
<caption>学生信息表</caption>
<tbody>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>66</td>
<td>男</td>
<td>
<a href="JavaScript:void(0);" onclick="drop(this)">删除</a>
<!-- JavaScript:void(0);起到点击删除后,不刷新页面这样一个功能 -->
</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>男</td>
<td>
<a href="JavaScript:void(0);" onclick="drop(this)">删除</a>
</td>
</tr>
</tbody>
</table>
<script>
// 完成添加功能需要:
// 为添加按钮绑定单击事件
document.getElementById("add").onclick = function(){
// 创建行元素<tr>
let tr = document.createElement("tr");
// 创建4个单元格元素<td>
let nametd = document.createElement("td");
let agetd = document.createElement("td");
let sextd = document.createElement("td");
let deletetd = document.createElement("td");
// 将<td>添加到<tr>中
tr.appendChild(nametd);
tr.appendChild(agetd);
tr.appendChild(sextd);
tr.appendChild(deletetd);
// 获取输入框的文本内容
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let sex = document.getElementById("sex").value;
// 创建相应数量的文本元素
let nameText = document.createTextNode(name);
let ageText = document.createTextNode(age);
let sexText = document.createTextNode(sex);
// 将文本元素添加到<td>中
nametd.appendChild(nameText);
agetd.appendChild(ageText);
sextd.appendChild(sexText);
// 创建超链接元素和显示的文本以及添加href属性
let a = document.createElement("a");
let aText = document.createTextNode("删除");
a.setAttribute("href", "JavaScript:void(0);");
a.appendChild(aText);
a.setAttribute("onclick", "drop(this)");
// 将超链接元素添加到<td>中
deletetd.appendChild(a);
// 获取table元素,将<tr>添加到table中
let table = document.getElementById("tb");
table.appendChild(tr);
// document.write("===================");
}
// 完成删除功能需要使用父元素删除子元素:
// 为每个删除超链接添加单击事件属性
// 定义删除方法
function drop(obj){
// 获取table元素
let table = obj.parentElement.parentElement.parentElement;
// 获取tr元素
let tr = obj.parentElement.parentElement;
// 通过table删除tr
table.removeChild(tr);
}
</script>
</body>
</html>
初始页
点击删除后
输入王五,点击添加,创建新行