<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>动态表格.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<a href="javascript:void(0)" onclick="delOne(this)"></a>
javascript:void(0)相当于让href属性失效！！ -->
<script type="text/javascript">
/*清除内容*/
function clearAll() {
//1，获取用户信息列表
var infoList = document.getElementsByName("info");
//2，遍历
for (var i = 0; i < infoList.length; i++) {
//清空数据
infoList[i].value = "";
}
}
/*添加的第一种方式*/
/* function addItems(){
//1，创建一个行的内容
//1.1创建一个行的对象
var tr=document.createElement("tr");
//1.2创建列内容
//1.3获取用户传入数据的内容，第一列，第七列自己设置，不是用户输入。
var td1=document.createElement("td");
var in2=document.getElementById("in2").value;
var in3=document.getElementById("in3").value;
var in4=document.getElementById("in4").value;
var in5=document.getElementById("in5").value;
var in6=document.getElementById("in6").value;
//1.4创建5个列对象
var td2=document.createElement("td");
var td3=document.createElement("td");
var td4=document.createElement("td");
var td5=document.createElement("td");
var td6=document.createElement("td");
var td7=document.createElement("td");
//1.5设置7个列对象的内容，其中第一列，第七列自己设置
td1.innerHTML="<input type='checkbox' id='in1'/>";
td2.innerHTML=in2;
td3.innerHTML=in3;
td4.innerHTML=in4;
td5.innerHTML=in5;
td6.innerHTML=in6;
td7.innerHTML="<input type='button' id='in7' value='删除'/>";
//2，将7列的内容添加到一行中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7)
//3，将一行内容放到tbody标签末尾
var tbodyNode=document.getElementsByTagName("tbody")[0];
tbodyNode.appendChild(tr);
} */
/*添加的第二种方式*/
function addItems() {
//1，创建一个行的内容
//1.1创建一个行的对象
var tr = document.createElement("tr");
/*1.2第一列 是自己设置的 所以单独设置添加*/
//创建第一列
var td1 = document.createElement("td");
//设置第一列的内容
td1.innerHTML = "<input name='select' type='checkbox' />";
//向行中添加这列
tr.appendChild(td1);
//1.3获取用户信息列表
var infoList = document.getElementsByName("info");
//1.4遍历用户信息
for (var i = 0; i < infoList.length; i++) {
//建立一个新的列
var newTd = document.createElement("td");
//将用户数据添加到新的列中
newTd.innerHTML = infoList[i].value;
//向行中添加这个新的列
tr.appendChild(newTd);
}
/*1.5第七列 是自己设置的 所以单独设置添加*/
//创建第七列
var td7 = document.createElement("td");
//向第七列添加内容
td7.innerHTML = "<a href='javascript:void(0)' onclick='delOne(this)'>删除" + "</a>";
tr.appendChild(td7);
//使行内内容居中
tr.align = "center";
//将第七列添加到行中
//2.将设置好的行的内容添加到 tbody的末尾
//2.1根据标签名获取节点对象
var tbodyNode = document.getElementsByTagName("tbody")[0];
//2.2添加内容进入tbody中（末尾处）
tbodyNode.appendChild(tr);
}
/* 删除一行 */
//参数名随便写但是必须要把第七列内容对象传进来，这里是a标签
function delOne(a) {
//判断用户是否确认删除
if (confirm("确认删除?")) {
//根据标签名获取节点对象
var tbodyNode = document.getElementsByTagName("tbody")[0];
//a标签的父节点是列标签 列的父节点是行，所以删除本行，如下写法
tbodyNode.removeChild(a.parentNode.parentNode);
}
}
/*设置全选*/
function selectAll(obj) {
//记住全选按钮状态
var status = obj.checked;
//获取所有复选框列表
var selectList = document.getElementsByName("select");
for (var i = 0; i < selectList.length; i++) {
//将全选的状态赋给所有的复选框
selectList[i].checked = status;
}
}
/*选择删除*/
function selectDel() {
//判断用户是否确认删除
if (confirm("确认删除？")) {
//获取所有复选框列表
var selectList = document.getElementsByName("select");
//获取tbody节点
var tbodyNode = document.getElementsByTagName("tbody")[0];
for (var i = 0; i < selectList.length; i++) {
if (selectList[i].checked) {
//删除这一行内容
tbodyNode.removeChild(selectList[i].parentNode.parentNode);
/*这里i--尤为重要，保证选中的能被全部删除
原因分析：JS中数组的长度是可变的，当删除一个元素时，后面的元素会自动往前
挪动一位，数组长度减一。这样处于该元素后面的元素角标都发生了变化
（都向前挪动了一位）所以i--保证数组里面的元素都能被判断到
*/
i--;
}
}
}
}
</script>
<style type="text/css">
/* 设置伪类选择器 */
a:link {
font-size: 18px;
text-decoration: none;
}
a:hover {
font-size: 18px;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 表格布局 -->
<table width="500px" border="1" align="center">
<thead>
<tr id="tr1" bgcolor="blue" align="center">
<td>选中</td>
<td>编号</td>
<td>用户</td>
<td>密码</td>
<td>年龄</td>
<td>住址</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox"
onchange="selectAll(this)"></td>
<td colspan="6"><a href="javascript:void(0)"
onclick="selectDel()">删除选中</a></td>
</tr>
</tbody>
</table>
<hr />
<table width="300px" border="1" align="center">
<tr>
<td>编号：</td>
<td><input type="text" id="in2" name="info" /></td>
</tr>
<tr>
<td>用户：</td>
<td><input type="text" id="in3" name="info" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="in4" name="info" /></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" id="in5" name="info" /></td>
</tr>
<tr>
<td>住址：</td>
<td><input type="text" id="in6" name="info" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="重置"
onclick="clearAll()" /> <input
type="button" value="添加" onclick="addItems()" /></td>
</tr>
</table>
</body>
</html>
效果：
JS：动态表格
很多事情即将开始，很多人的命运即将改变