<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#add {
width: 800px;
margin: 20px auto 0 auto;
}
#usertable {
width: 800px;
text-align: center;
border-collapse: collapse;
border: solid 1px #000;
margin: 20px auto 0 auto;
}
#usertable tr {
height: 40px;
}
#sub{
margin:10px auto;
}
</style>
<script>
//添加行的函数
function add() {
var msgarray = ["请填入姓名！", "请填入email！", "请填入phone！"];//这里是提示没有输入的时候输出的界面（这里是一个数组）
//定义一个obj数组存储文本框对象，并且实现初始化
var objarray = [];
objarray[0] = document.getElementById("username");
objarray[1] = document.getElementById("email");
objarray[2] = document.getElementById("phone");
//对输入值为空的检验.合法性检验请自己添加.（会用到正则表达式）
for (var i = 0; i < objarray.length; i++) {
if (objarray[i].value == "") {
alert(msgarray[i]);
objarray[i].focus();//focus() 方法用于赋予文本域焦点(在这里也就是，聚焦到用户所没有添加的信息输入框)
return;
}
}
//创建一个tr.即创建一行.
var tr = document.createElement("TR");
//根据输入的值创建这一行的3个单元格td.
for (var i = 0; i < 3; i++) {
var td = document.createElement("TD");//创建td
td.appendChild(document.createTextNode(objarray[i].value));//创建文本节点
tr.appendChild(td);//将文本节点添加到td中
}
//创建操作列的td单元格.
var td = document.createElement("TD");
td.innerHTML = "<a href=\"javascript:void(0)\" οnclick=\"del(this)\">Delete</a>";
tr.appendChild(td);
//将创建好的行tr添加的tbody中.注意添加行应添加到tbody不要直接添加的table中.
var t_body = document.getElementById("t_body");
t_body.appendChild(tr);
//添加完成后将文本框中的内容置空.
for (var i = 0; i < 3; i++) {
objarray[i].value = "";
}
}
//删除行的函数
function del(o) {
//o此时为<a>标签所对应的对象,o的父节点的父节点就为点击的当前行(就是当前的tr).
var row = o.parentNode.parentNode;
//获得当前点击行的索引.
var rowindex = row.rowIndex;
//找到tbody对象.
var t_body = document.getElementById("t_body");
//通过索引把当前点击行从tbody中删除.注意这里也要通过tbody去删除.
t_body.deleteRow(rowindex);
}
</script>
</head>
<body>
<div id="add">
<p align="center" style="height:30px">添加用户</p>
姓名：<input type="text" id="username" name="username" />
email：<input type="text" id="email" name="email" />
电话：<input type="text" id="phone" name="phone" />
<div id="sub" align="center"><input type="button" value="提交" οnclick="add()" /></div>
</div>
<div id="view">
<table id="usertable" border="1" cellspacing="0" cellpadding="0">
<tbody id="t_body">
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>操作</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
