js向table表格动态增加行，删除行经常被用到，一般用于数据的批量添加和批量删除，本案例采用原生的JavaScript来实现，css样式自己设计，效果如图。
下面是js实现表格动态增加行，删除行的html和js代码，直接复制过去就可以使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>作业-动态表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#list tr th {
background-color: #06F;
}
</style>
</head>
<body>
<table id="list" border="1" align="center" width="500px">
<thead>
<tr>
<th>
<input type="checkbox" id="all" onclick="checkAll(this)" />
</th>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<a href="javascript:void(0)" onclick="delSelect()">删除选择</a>
</td>
</tr>
</tfoot>
</table>
<hr />
<form method="post" action="addUser.action">
<table border="1" align="center" width="300px">
<tr>
<th>编号</th>
<td>
<input type="text" id="id" />
</td>
</tr>
<tr>
<th>姓名
</th>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input type="text" id="password" />
</td>
</tr>
<tr>
<th>年龄</th>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<th>住址</th>
<td>
<input type="text" id="address" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="重置" />
<input type="button" value="添加" onclick="addItem()" />
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
/*
<tr>
<td><input type="checkbox" name="sub"/></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>删除</td>
</tr>
*/
// 1. 添加一行
function addItem(){
//1.1 获取输入数据
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var pwd = document.getElementById("password").value;
var age = document.getElementById("age").value;
var address = document.getElementById("address").value;
//1.2 把输入数据添加到表格中： 创建新的一行、设置值、且添加！
//1.2.1 创建节点
var tr = document.createElement("tr");
var td_cbx = document.createElement("td");
var td_id = document.createElement("td");
var td_name = document.createElement("td");
var td_pwd = document.createElement("td");
var td_age = document.createElement("td");
var td_address = document.createElement("td");
var td_op = document.createElement("td");
// 设置值
td_cbx.innerHTML = "<input type=\"checkbox\" name=\"sub\" />";
td_id.innerHTML = id;
td_name.innerHTML = name;
td_pwd.innerHTML = pwd;
td_age.innerHTML = age;
td_address.innerHTML = address;
td_op.innerHTML = "<a href=\"#\" onclick=\"deleteOne(this)\">删除</a>";
//1.2.2 处理节点关系
tr.appendChild(td_cbx);
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_pwd);
tr.appendChild(td_age);
tr.appendChild(td_address);
tr.appendChild(td_op);
//1.2.3 添加到tobody中
document.getElementsByTagName("tbody")[0].appendChild(tr);
}
//2. 删除一行
function deleteOne(obj_a){
/*
//2.1 找到要删除的行
var deletRow = obj_a.parentNode.parentNode;
//2.2 找到tbody， 删除上面的行
//a. 根据标签获取
//var tbody = document.getElementsByTagName("tbody")[0];
//b. 根据节点关系查找
var tbody = deletRow.parentNode;
// 删除
tbody.removeChild(deletRow);
*/
// 超链接标签的父标签（td）,父标签(tr),父标签(tbody) 删除一行即<tr>内的
obj_a.parentNode.parentNode.parentNode.removeChild(obj_a.parentNode.parentNode);
}
//3. 全选
function checkAll(obj){
// 获取父复选框
// var all = document.getElementById("all");
var all = obj;
// 获取所有的自复选框
var sub = document.getElementsByName("sub");
// 遍历
for (var i=0;i<sub.length;i++){
sub[i].checked = all.checked; // 子复选框状态，与父复选框状态一致
}
}
//4. 删除选择
function delSelect(){
//4.1 获取toby
var tbody = document.getElementsByTagName("tbody")[0];
//4.2 获取所有子复选框
var sub = document.getElementsByName("sub");
//4.3 迭代
for (var i=0;i<sub.length;i++){
if (sub[i].checked){
tbody.removeChild( sub[i].parentNode.parentNode );
i--;
}
}
}
</script>
</html>