查看本章节
查看作业目录
需求说明：
在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接，使用 DOM 节点的删除操作将对应的行数据删除
- 在文本输入框中输入姓名、年龄、班级和手机号，并选择性别
- 点击“插入数据”按钮，将输入框中的数据插入到表格中，表格中的数据将增加一条
- 点击表格中每条数据后的“删除”超链接，将删除该条数据，表格中的数据将减少一条
实现思路：
- 在页面中绘制表格，并添加 4 条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件
- 在页面中添加文本输入框和选项菜单，并提示用户输入，添加“插入数据”按钮，并添加点击事件
- 在“插入数据”按钮的事件处理函数中，使用 document 对象的 getElementById、getElementsByTagName等属性获取输入框的值
- 使用 createElement 创建元素，使用 innerHTML 为元素设置文本，使用 appendChild 将创建的元素添加到 table 中
- 在“删除”超链接的事件处理函数中，获取超链接的父节点 td，继续获取父节点 tr，再获取父节点 table，然后将 table 节点中的 tr 节点删除
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" id="tb">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
<th>电话</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
<td>软件1班</td>
<td>138xxxx0987</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>24</td>
<td>软件2班</td>
<td>136xxxx8766</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>26</td>
<td>计科1班</td>
<td>199xxxx8867</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>23</td>
<td>计科2班</td>
<td>188xxxx9965</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
</table>
<p>
<input type="text" id="name" placeholder="请输入姓名"/>
<select>
<option>男</option>
<option>女</option>
</select>
<input type="text" id="age" placeholder="请输入年龄" />
<input type="text" id="cls" placeholder="请输入班级" />
<input type="text" id="mobile" placeholder="请输入手机号" />
<input type="button" value="插入数据" onClick="insert()" />
</p>
<script type="text/javascript">
function insert(){
var sel=document.getElementsByTagName("select")[0];
var gender=sel.options[sel.selectedIndex].text;
var age=document.getElementById("age").value;
var cls=document.getElementById("cls").value;
var mobile=document.getElementById("mobile").value;
var name=document.getElementById("name").value;
var arrays=new Array(name,gender,age,cls,mobile);
var tb=document.getElementById("tb");
var cols=tb.getElementsByTagName("th");
var newtr=document.createElement("tr");
for (var i=0;i<cols.length;i++) {
if(i==cols.length-1) {
var td=document.createElement("td");
var a=document.createElement("a");
a.innerHTML="删除";
a.onclick=function(){
a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
}
a.setAttribute("href","#");
td.appendChild(a);
newtr.appendChild(td);
}else{
var td=document.createElement("td");
td.innerHTML=arrays[i];
newtr.appendChild(td);
}
}
tb.appendChild(newtr);
console.log(newtr)
}
function del(obj){
var tr=obj.parentNode.parentNode;
if (tr!=null) {
tr.parentNode.removeChild(tr);
}
}
</script>
</body>
</html>