<!DOCTYPE HTML PUBLIC "-//W
<html>
<head>
<title>User.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/wpCalendar.js"></script>
</head>
<body>
<div align="center">
<h2>所有的用戶信息</h2>
<!--顯示區-->
<div style="border: 1px red solid; margin-bottom: 30px; padding:10px 10%;width: 600px" >
<table border="1px" cellpadding="0" cellspacing="0" id="tusers">
<thead>
<tr>
<th><input type="checkbox" name="chbk" id="chbk1"/></th>
<th>名稱</th>
<th>性別</th>
<th>郵箱</th>
<th>出生日期</th>
<th>操作</th>
</tr>
</thead>
<tbody id="users">
</tbody>
</table>
</div>
<!--編輯區-->
<div style="border: 1px red solid;width: 400px">
<form>
<table id="divs">
<tbody id="addUsers">
<tr>
<td>用戶名:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>性別:</td>
<td><select id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>郵箱:</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<input type="text" id="bir" name="bir" />
<input type=button value="oo"
onclick="showCalendar(this,document.all.bir)">
</td>
</tr>
<tr id="add1">
<td colspan="2" align="center">
<input type="button" value="添加"
onclick="addUser()" id="add"/>
</td>
</tr>
<tr id="update1">
<td colspan="2" align="center">
<input type="button" value="修改" id="upduser"/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript">
<!--
window.onload=function(){
document.getElementById("update1").style.display="none";
}
//添加操作
function addUser(){
//獲取文本框中的內容
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var email = document.getElementById("email").value;
var bir = document.getElementById("bir").value;
//獲取表格節點對象
var tusers = document.getElementById("tusers");
//創建行
var tr1 = document.createElement("tr");
//創建cbk列
var cbk = document.createElement("td");
//創建tname列
var tname = document.createElement("td");
//創建tsex列
var tsex = document.createElement("td");
//創建temail列
var temail = document.createElement("td");
//創建tbir列
var tbir = document.createElement("td");
//創建toper列
var toper = document.createElement("td");
//創建一個checkbox對象cbk1
var cbk1 = document.createElement("input");
cbk1.setAttribute("type","checkbox");
cbk1.setAttribute("name","chbk");
//把checkbox對象cbk1放到cbk列中
cbk.appendChild(cbk1);
//創建name對象並把它放到tname列中
tname.appendChild(document.createTextNode(name));
//創建sex對象並把它放到tsex列中
tsex.appendChild(document.createTextNode(sex));
//創建email對象並把它放到temail列中
temail.appendChild(document.createTextNode(email));
//創建bir對象並把它放到tbir中
tbir.appendChild(document.createTextNode(bir));
//創建a元素adelete和aupdate
var adelete = document.createElement("a");
var aupdate = document.createElement("a");
//並分別給它們設置屬性
adelete.setAttribute("href","#");
aupdate.setAttribute("href","#");
//在設置它們的文本節點
adelete.appendChild(document.createTextNode("刪除 |"));
aupdate.appendChild(document.createTextNode("修改"));
//把a元素的對象adelete和aupdate放到toper列中
toper.appendChild(adelete);
toper.appendChild(aupdate);
//把列添加行中
tr1.appendChild(cbk);
tr1.appendChild(tname);
tr1.appendChild(tsex);
tr1.appendChild(temail);
tr1.appendChild(tbir);
tr1.appendChild(toper);
//獲取將其要添加到的地方的元素節點
var users = document.getElementById("users");
//將創建的行放入
users.appendChild(tr1);
//再放入表格 對象 中
tusers.appendChild(users);
//刪除操作
adelete.onclick = function(){
users.removeChild(adelete.parentNode.parentNode);
}
//修改操作
aupdate.onclick = function(){
//隱藏添加標籤
document.getElementById("add1").style.display="none";
document.getElementById("update1").style.display="block";
//獲取行對象
var utr = aupdate.parentNode.parentNode;
//獲取行的所有子節點
var utrs= utr.childNodes;
//將獲取的內容放到文本框中
document.getElementById("name").value=utrs[1].innerHTML;
document.getElementById("sex").value=utrs[2].innerHTML;
document.getElementById("email").value=utrs[3].innerHTML;
document.getElementById("bir").value=utrs[4].innerHTML;
//獲取修改按鈕的節點元素
var upUser = document.getElementById("upduser");
//點擊修改按鈕
upUser.onclick = function(){
//將文本框的值添加到表格中
utr.childNodes[1].innerHTML = document.getElementById("name").value;
utr.childNodes[2].innerHTML = document.getElementById("sex").value;
utr.childNodes[3].innerHTML = document.getElementById("email").value
utr.childNodes[4].innerHTML = document.getElementById("bir").value
//隱藏修改標籤
document.getElementById("update1").style.display="none";
document.getElementById("add1").style.display="block";
}
}
}
//-->
</script>
