ajax学习篇3

发布时间：2020-12-16 01:01:20 所属栏目：百科来源：网络整理

导读：对节点的综合应用。例子:对表格动态的添加记录。 ! 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

对节点的综合应用。例子:对表格动态的添加记录。
<!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 ="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>

</bodystyle="text-align:center;">

<a>年龄</a>

<input"text"id="username">

<a>性别</"usersex">

<a>编号</"userid">

<button"addbutton">添加</button>

<"updatebutton">清空</button>

<tablewidth="100%"border="1""mytable">

<tbody>

<tr>

<td"tusername">姓名</td>

<"tusersex">性别</"tuserid">编号</td>

</td>飞鱼</td>23</td>00001</tr>

</tbody>

</table>

</body>

</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!