当前位置: 代码迷 >> JavaScript >> 利用JavaScript兑现js对user用户的分页和实现js对用户的增删改查操作
  详细解决方案

利用JavaScript兑现js对user用户的分页和实现js对用户的增删改查操作

热度:388   发布时间:2013-03-21 10:08:17.0
利用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 + "]";
}

  相关解决方案