JavaScript之DOM综合应用练习
效果图：
实现代码如下：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>dcoument综合练习title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
margin: 0 auto;
}
hr{
margin: 10px;
}
div{
width: 500px;
border: 1px solid #c7cbd1;
}
style>
<script type="text/javascript">
var _id=1;//全局变量id
//删除某个元素按钮事件
function deletes(id){
//获取父元素的对象
var tbodys=document.getElementsByTagName("tbody")[0];
//获取tr的元素
var trs=tbodys.getElementsByTagName("tr");
//删除指定的行
tbodys.removeChild(trs[id]);
//将被删除后的行的id进行更改
for (var i = id; i < trs.length; i++) {
//先获取每行的最后一个单元格元素，在获取该单元格的孩子元素，
trs[i].lastChild.firstChild.setAttribute("href","javascript:deletes("+i+")");
}
//每删除一个记录总记录的id就减一
_id--;
}
//删除选中的全部记录的方法
function deleteall(){
//获取父元素的对象
var tbodys=document.getElementsByTagName("tbody")[0];
//获取th的元素
var ths=tbodys.getElementsByTagName("th");
alert(ths.length);
//遍历th元素的数组
//需要从后往前删除，如果是从前向后删除则会每次只删除一条记录
for (var i = ths.length-1; i >=0; i--) {
if (ths[i].firstChild.checked==true) {
tbodys.removeChild(ths[i].parentNode);
}
}
//将被删除后的行的id进行更改
for (var i = 0; i < ths.length; i++) {
//从第一个元素进行遍历，对每一个元素都进行更改
ths[i].parentNode.lastChild.firstChild.setAttribute("href","javascript:deletes("+i+")");
}
//设置全局变量id的值为数组长度的值；为添加记录做铺垫
_id=ths.length;
}
//全部选中的方法
function selectall(){
alert("okokoko");
//获取父元素的对象
var tbodys=document.getElementsByTagName("tbody")[0];
//获取th的元素
var ths=tbodys.getElementsByTagName("th");
//利用for循环实现状态的改变（存在一缺点：在点击前选中的选项会变为未选中状态）
for(var i=0;i//判断是否为选中状态
if(ths[i].firstChild.checked==true){
ths[i].firstChild.checked=false;
}else{
ths[i].firstChild.checked=true;
}
}
}
window.onload=function(){
//添加人员信息的方法：
var _into=document.getElementById("into").onclick=function(){
//获取填写数据并验证是否符合要求！！
var _code=document.getElementById("code").value;
var _name=document.getElementById("name").value;
var _pass=document.getElementById("pass").value;
var _ages=document.getElementById("ages").value;
var _adress=document.getElementById("adress").value;
var message="";//错误信息
var floag=1;//开关变量
if(isNaN(_code)){
message+="编号不可以为空或非数字形式\n";
floag=0;//改变开关变量的状态
}
if(!/^[0-9A-Za-z]{8,12}$/.test(_pass)){
alert("no");
message+="密码为字母数字的8-12位组合\n";
floag=0;
}
if(!/^[0-9]{2,3}$/.test(_ages)){
message+="年龄不合法！\n"
floag=0;
}
if(floag==0){
alert(message);
}else{
//获取第一个tbody对象
var _tbody=document.getElementsByTagName("tbody")[0];
//创建tr元素
var _tr=document.createElement("tr");
//创建td元素
var _td0=document.createElement("th");
var _newcheck=document.createElement("input");
//设置input元素的属性为CheckBox
_newcheck.setAttribute("type","checkbox");
_newcheck.setAttribute("id",_id);//设置CheckBox的id属性
//将input元素添加到单元格中
_td0.appendChild(_newcheck);
var _td1=document.createElement("td");
//添加单元格的文本元素
_td1.innerHTML=_code;
var _td2=document.createElement("td");
_td2.innerHTML=_name;
var _td3=document.createElement("td");
_td3.innerHTML=_pass;
var _td4=document.createElement("td");
_td4.innerHTML=_ages;
var _td5=document.createElement("td");
_td5.innerHTML=_adress;
var _td6=document.createElement("td");
var _newa=document.createElement("a");
//添加超链接的事件属性
var x=1;
_newa.setAttribute("href","javascript:deletes("+_id+")");
_newa.innerHTML="删除";
_td6.appendChild(_newa);
//将td添加到tr中
_tr.appendChild(_td0);
_tr.appendChild(_td1);
_tr.appendChild(_td2);
_tr.appendChild(_td3);
_tr.appendChild(_td4);
_tr.appendChild(_td5);
_tr.appendChild(_td6);
//将tr添加到tbody中
_tbody.appendChild(_tr);
_id++;//全局变量id++
//每次添加完后需要调用重置的方法将输入框内容置空
}
}
//重置按钮的事件方法：
document.getElementById("resert").onclick=function(){
document.getElementById("code").value="";
document.getElementById("name").value="";
document.getElementById("pass").value="";
document.getElementById("ages").value="";
document.getElementById("adress").value="";
}
}
script>
head>
<body>
<div>
<table border="1">
<caption>人员信息表caption>
<thead>
<tr>
<th>选中th>
<th>编号th>
<th>用户th>
<th>密码th>
<th>年龄th>
<th>住址th>
<th>操作th>
tr>
<tr>
<th><input type="checkbox" name="checkall" onchange="selectall()">th>
<th colspan="6" align="center">
<a href="javascript:deleteall()">全部删除a>
th>
tr>
thead>
<tbody>
<tr>
<th><input type="checkbox" id="0">th>
<td>001td>
<td>admintd>
<td>roottd>
<td>41td>
<td>香港九龙湾td>
<td><a href="javascript:deletes(0)">删除a>td>
tr>
tbody>
table>
<hr border="2"/>
<table border="1" cellspacing="0">
<caption>添加人员信息caption>
<tbody>
<tr>
<th>编号：th>
<td><input type="text" id="code">td>
tr>
<tr>
<th>用户：th>
<td><input type="text" id="name">td>
tr>
<tr>
<th>密码：th>
<td><input type="text" id="pass">td>
tr>
<tr>
<th>年龄：th>
<td><input type="text" id="ages">td>
tr>
<tr>
<th>住址：th>
<td><input type="text" id="adress">td>
tr>
tbody>
<tfoot>
<tr>
<th colspan="7">
<button type="button" id="resert">重置button>
<button type="button" id="into">添加button>
th>
tr>
tfoot>
table>
div>
body>
html>