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