用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" onclick="selectAll()"/>
???????</th>
???????<th>
????????名称
???????</th>
???????<th>
????????性别
???????</th>
???????<th>
????????邮箱
???????</th>
???????<th>
????????出生日期
???????</th>
???????<th>
????????操作
???????</th>
??????</tr>
?????</thead>
?????<tbody id="users">
??????<!-- 添加信息和分页控件 -->
?????</tbody>
????</table>
????<div id="pages">
????</div>
???</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";
??????????? }??????
?????????? }
?????
?????? //添加分页
?????? testPage();
?}
?
//定义分页标签节点对象并创建
var indexPage = document.createElement("a");
var upPage = document.createElement("a");
var downPage = document.createElement("a");
var endPage = document.createElement("a");
var nowpage = 1;
//分页技术的实现
function testPage() {
?var tbodyUsers = document.getElementById("users");
?var trUsers = tbodyUsers.getElementsByTagName("tr");
?//获取总记录数
?var countRecord = trUsers.length;
?//每页显示的记录数
?var PAGESIZE = 2;
?//总页数
?var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE
???: Math.ceil(countRecord / PAGESIZE));
?//当前页信息
?// =======>从那条记录开始 (nowpage-1)*PAGESIZE;
?//var nowpage = countPage;
?//获取创建分页标签的节点对象
?var pages = document.getElementById("pages");
?//如果没有创建分页标签的节点则创建节点对象
?if (!pages.hasChildNodes()) {
??getPages(nowpage);
?}
?//当点击首页时的操作
?indexPage.onclick = function() {
??nowpage = 1;
??//显示首页的记录
??indexPageInfo(countRecord, trUsers);
?}
?//当点击上一页的操作
?upPage.onclick = function() {
??if (nowpage - 1 > 1) {
???nowpage -= 1;
??} else {
???nowpage = 1;
???indexPageInfo(countRecord, trUsers);
??}
??//显示上一页记录
??var startindex = (nowpage - 1) * PAGESIZE;
??var endindex = startindex + PAGESIZE;
??PageInfo(startindex, endindex, countRecord, trUsers)
?}
?//当点击下一页的操作
?downPage.onclick = function() {
??if (nowpage + 1 >= countPage) {
???nowpage = countPage;
??} else {
???nowpage += 1;
??}
??//显示上一页记录
??var startindex = (nowpage - 1) * PAGESIZE;
??var endindex = startindex + PAGESIZE;
??PageInfo(startindex, endindex, countRecord, trUsers)
?}
?//当点击最后一页的操作
?endPage.onclick = function() {
??nowpage = countPage;
??if (nowpage > 1) {
???var startindex = (nowpage-1)*PAGESIZE;
???for ( var i = 0; i < countRecord; i++) {
????if (i < startindex) {
?????trUsers[i].style.display = "none";
????} else {
?????trUsers[i].style.display = "block";
????}
???}
??} else {
???indexPageInfo(countRecord, trUsers);
??}
?}
}
//首页的显示记录
function indexPageInfo(countRecord, trUsers) {
?if (countRecord <= 2) {
??for ( var i = 0; i < PAGESIZE; i++) {
???trUsers[i].style.display = "block";
??}
?} else {
??for ( var i =2; i < countRecord; i++) {
???trUsers[i].style.display = "none";
??}
?}
}
//上一页 下一页的显示记录
function PageInfo(startindex, endindex, countRecord, trUsers) {
?for ( var i = 0; i < countRecord; i++) {
??if (i >= startindex && i < endindex) {
???trUsers[i].style.display = "block";
??} else {
???trUsers[i].style.display = "none";
??}
?}
}
//最后一页的显示记录
//创建分页的相应链接地址
function getPages(numpage) {
?indexPage.appendChild(document.createTextNode("首页"));
?indexPage.setAttribute("href", "#");
?upPage.appendChild(document.createTextNode("上一页"));
?upPage.setAttribute("href", "#");
?downPage.appendChild(document.createTextNode("下一页"));
?downPage.setAttribute("href", "#");
?endPage.appendChild(document.createTextNode("末页"));
?endPage.setAttribute("href", "#");
?//获取创建连接的位置的节点对象
?var pages = document.getElementById("pages");
?//添加到节点中
?pages.appendChild(indexPage);
?pages.appendChild(upPage);
?pages.appendChild(downPage);
?pages.appendChild(endPage);
}
function selectAll() {
?//获取所有用户信息的根节点
?var users = document.getElementById("users");
?//获取根节点中的input标签节点
?var ips = users.getElementsByTagName("input");
?//获取chbk的节点对象
?var chbk = document.getElementById("chbk1");
?for ( var i = 0; i < ips.length; i++) {
??//让遍历的结果于chbk中接到的checked属性值一致即可
??ips[i].setAttribute("checked", chbk.getAttribute("checked"));
?}
}
//-->
</script>
