javascript中DOM实现用户的增删改案例详解----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
