对节点的综合应用。例子:对表格动态的添加记录。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<@H_403_22@html>
<@H_403_22@head>
<@H_403_22@Metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<@H_403_22@title>Insert title here</@H_403_22@title>
<@H_403_22@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 ="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");
}*/
}
</@H_403_22@script>
</@H_403_22@bodystyle="text-align:center;">
<@H_403_22@input"text"id="username">
<@H_403_22@a>性别</"usersex">
<@H_403_22@a>编号</"userid">
<@H_403_22@button"addbutton">添加</@H_403_22@button>
<"updatebutton">清空</@H_403_22@button>
<@H_403_22@tablewidth="100%"border="1""mytable">
<@H_403_22@tbody>
<@H_403_22@tr>
<@H_403_22@td"tusername">姓名</@H_403_22@td>
<"tusersex">性别</"tuserid">编号</@H_403_22@td>
</@H_403_22@td>飞鱼</@H_403_22@td>23</@H_403_22@td>00001</@H_403_22@tr>
</@H_403_22@tbody>
</@H_403_22@table>
</@H_403_22@body>
</@H_403_22@html>