利用JavaScript兑现js对user用户的分页和实现js对用户的增删改查操作
js_users.html文件的源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< title>js_users.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/users.js" charset="UTF-8"></script>
< /head>
<body>
<div id="one" align="center">
<div>
用户名：<input type="text" id="userName" /> 性别：<input type="text"
id="userSex" /> 职业：<input type="text" id="userRole" /> <br /> <input
type="button" value="添加用户" id="addUsers" /><input type="button"
value="更新用户" id="updateUser" />
</div>
<br /> <br />
<div>
<table border="1px" cellpadding="0" cellspacing="0" style="border-color: orange">
<thead>
<th>用户名</th>
<th>性别</th>
<th>职业</th>
<th>操作</th>
</thead>
<tbody id="showUsers">
</tbody>
</table>
</div>
<div id="page">
<input type="button" id="firstPage" value="首页"/>
<input type="button" id="backPage" value="上一页"/>
<input type="button" id="nextPage" value="下一页"/>
<input type="button" id="lastPage" value="末页"/>
<span id="msg"></span>
</div>
</div>
< /body>
< /html>
users.js文件的源代码：
var uptr = null;
window.onload = function() {
var pagesize = 3;
var recondsize = 0;
var countpage = 0;
var nowpage = 1;
var users = new Array();
var start = 0;
var end = 0;
var userName = $("userName");
var userSex = $("userSex");
var userRole = $("userRole");
var updaBtn = $("updateUser");
updaBtn.onclick = function() {
if (uptr == null) {
alert("没有数据需要更新");
} else {
var tds = uptr.childNodes;
tds[0].firstChild.nodeValue = userName.value;
tds[1].firstChild.nodeValue = userSex.value;
tds[2].firstChild.nodeValue = userRole.value;
var id = uptr.getAttribute("id");
alert(id);
alert(users.length);
users.splice(id, 1, users);
alert(users[id].name);
alert(users.length);
//alert(users[id].name+users[id].sex+users[id].role);
users[id].name = userName.value;
users[id].sex = userSex.value;
users[id].role = userRole.value;
// 这条数据在 users数组的下标
//users[1];
}
};
var domshowUsers = $("showUsers");
var addBtn = $("addUsers");
addBtn.onclick = function() {
var user = new User(userName.value, userSex.value, userRole.value);
users.push(user);
recondsize = users.length;
countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math
.ceil(recondsize / pagesize);
if (recondsize > pagesize) {
start = recondsize - pagesize;
end = recondsize;
} else {
start = 0;
end = recondsize;
}
showUsers(users, start, end, recondsize, countpage, domshowUsers);
};
var firstPage = $("firstPage");
var backPage = $("backPage");
var nextPage = $("nextPage");
var lastPage = $("lastPage");
firstPage.onclick = function() {
nowpage = 1;
if (recondsize <= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
} else {
start = 0;
end = pagesize;
}
showUsers(users, start, end, recondsize, countpage, domshowUsers);
};
backPage.onclick = function() {
nowpage = nowpage - 1;
if (nowpage <= 1) {
nowpage = 1;
}
if (recondsize <= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
} else {
start = (nowpage - 1) * pagesize;
end = nowpage * pagesize;
}
showUsers(users, start, end, recondsize, countpage, domshowUsers);
};
nextPage.onclick = function() {
nowpage = nowpage + 1;
if (nowpage >= countpage) {
nowpage = countpage;
}
if (recondsize <= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
} else {
start = (nowpage - 1) * pagesize;
if (nowpage * pagesize > recondsize) {
end = recondsize;
} else {
end = nowpage * pagesize;
}
}
showUsers(users, start, end, recondsize, countpage, domshowUsers);
};
lastPage.onclick = function() {
nowpage = countpage;
if (recondsize <= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
} else {
start = (nowpage - 1) * pagesize;
end = recondsize;
}
showUsers(users, start, end, recondsize, countpage, domshowUsers);
};
};
function $(id) {
return document.getElementById(id);
}
function User(name, sex, role) {
this.name = name;
this.sex = sex;
this.role = role;
}
function showUsers(users, start, end, recondsize, countpage, domshowUsers) {
for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}
for ( var i = start; i < end; i++) {
var user = users[i];
var tr = document.createElement("tr");
tr.setAttribute("id", i);
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(user.name));
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(user.sex));
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(user.role));
var td4 = document.createElement("td");
var delBtn = document.createElement("button");
delBtn.appendChild(document.createTextNode("删除"));
delBtn.onclick = function() {
var deltr = this.parentNode.parentNode;
var index = deltr.getAttribute("id");
domshowUsers.removeChild(deltr);
users.pop(users[index]);
/*
* var id = uptr.getAttribute("id"); users.pop(users[id]);
*/
recondsize = users.length;
countpage = recondsize % pagesize == 0 ? recondsize / pagesize
: Math.ceil(recondsize / pagesize);
};
var updateBtn = document.createElement("button");
updateBtn.appendChild(document.createTextNode("编辑"));
updateBtn.onclick = function() {
uptr = this.parentNode.parentNode;
var tds = uptr.childNodes;
for ( var i = 0; i < tds.length; i++) {
var td = tds[i];
if (td.nodeType == 1) {
if (i == 0) {
userName.value = td.firstChild.nodeValue;
} else if (i == 1) {
userSex.value = td.firstChild.nodeValue;
} else if (i == 2) {
userRole.value = td.firstChild.nodeValue;
}
}
}
};
td4.appendChild(delBtn);
td4.appendChild(updateBtn);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
if (domshowUsers.hasChildNodes()) {
domshowUsers.insertBefore(tr, domshowUsers.firstChild);
} else {
domshowUsers.appendChild(tr);
}
}
$("msg").innerHTML = "总共:[" + recondsize + "]条数据,[" + countpage + "]页";
}