<!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>
