对节点的综合应用。例子:对表格动态的添加记录。
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {//加载窗体
document.getElementById("addbutton").onclick = function() {
var username = document.getElementById("username");
var usersex = document.getElementById("usersex");
var userid = document.getElementById("userid");//获取所有text节点
var tusernameElement = document.createElement("td");//创建一个td节点
var tusernametextElement =document.createTextNode(username.value);//创建一个文本节点
tusernameElement.appendChild(tusernametextElement);/将该节点挂在到td上
var tusersexElement = document.createElement("td");
var tusersextextElement =document.createTextNode(usersex.value);
tusersexElement.appendChild(tusersextextElement);
var tuseridElement = document.createElement("td");
var tuseridtextElement =document.createTextNode(userid.value);
tuseridElement.appendChild(tuseridtextElement);//同上
var trElement = document.createElement("tr");//创建一个tr节点
trElement.appendChild(tusernameElement);//将td节点一次挂到tr节点上
trElement.appendChild(tusersexElement);
trElement.appendChild(tuseridElement);
var tbodyElement=document.createElement("tbody");//创建tbody节点
var tableElement = document.getElementById("mytable");//获取table节点
tbodyElement.appendChild(trElement);//将tr挂载到tbody
tableElement.appendChild(tbodyElement);//将tbody挂载到table上
}
document.getElementById("updatebutton").onclick = function() {
var username = document.getElementById("username");
var usersex = document.getElementById("usersex");
var userid = document.getElementById("userid");
username.value="";
usersex.value="";
userid.value="";
}
/* document.getElementById("deletebutton").οnclick= function() {
var username =document.getElementById("username");
var usersex =document.getElementById("usersex");
var userid =document.getElementById("userid");
}*/
}
</script>
</head>
<body style="text-align: center;">
<a>年龄</a>
<input type="text"id="username">
<a>性别</a>
<input type="text"id="usersex">
<a>编号</a>
<input type="text"id="userid">
<button id="addbutton">添加</button>
<button id="updatebutton">清空</button>
<table width="100%"border="1" id="mytable">
<tbody>
<tr>
<td id="tusername">姓名</td>
<td id="tusersex">性别</td>
<td id="tuserid">编号</td>
</tr>
<tr>
<td>飞鱼</td>
<td>23</td>
<td>00001</td>
</tr>
</tbody>
</table>
</body>
</html>
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
