纯前端实现—表格的行添加和删除
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯前端实现—表格的行添加和删除相关的知识，希望对你有一定的参考价值。
实现效果：
表格行的添加和删除
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格行的添加及删除</title>
<style>
input{
width:200px;
height: 25px;
margin-bottom: 10px;
}
table td{
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<form>
姓  名：<input type="text" id="user"><br>
年  龄：<input type="text" id="age"><br>
电话号码：<input type="text" id="phone"><br>
<input type="button" value="添加" onclick="add()">
</form>
<table border="1" id="tab">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>电话号码</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>45</td>
<td>17596996865</td>
<!--this表示用户当前选中的那个删除按钮，即<button οnclick="del(this)">删除</button>-->
<td><button onclick="del(this)">删除</button></td>
</tr>
</table>
<script>
// 实现表格信息添加功能
function add() {
// 获取元素
var user = document.getElementById("user");
var age = document.getElementById("age");
var phone = document.getElementById("phone");
var table = document.getElementById("tab");
// 创建行
var tr = document.createElement("tr");
// 创建列
var td1 = document.createElement("td");
td1.innerText = user.value;
var td2 = document.createElement("td");
td2.innerText = age.value;
var td3 = document.createElement("td");
td3.innerText = phone.value;
var td4 = document.createElement("td");
td4.innerHTML = "<button οnclick='del(this)'>删除</button>";
// 将列放入行里面
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
// 将行放入表格里面
table.appendChild(tr);
// 将输入数据添加到表格后清空输入框
user.value = "";
age.value = "";
phone.value = "";
}
// 实现删除按钮的功能实现
function del(obj) {
var tab = document.getElementById("tab");
// 通过单击那个删除按钮获取删除的那一行的行数
var row = obj.parentNode.parentNode.rowIndex; //obj.parentNode是this的父级节点，即：包含删除按钮的td元素
//然后再.parentNode查询父节点，即：包含这个td的行元素tr
//最后.rowIndex是获取这个行元素在表格中的行数。
// 删除行
tab.deleteRow(row);
}
</script>
</body>
</html>
以上是关于纯前端实现—表格的行添加和删除的主要内容，如果未能解决你的问题，请参考以下文章