javascript中DOM兑现用户的增删改案例详解-
日期：2014-05-16 浏览次数：20371 次
<!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");<
