js实现user增删改查 js

js_users.html文件的源代码：

< html>
< head>
< title>js_users.html - 锐客网

< meta http-equiv="description" content="this is my page">
< meta http-equiv="content-type" content="text/html; charset=UTF-8">

< script type="text/javascript" src="https://www.it610.com/article/js/users.js" charset="UTF-8">
< /head>

用户名：性别：id="userSex" /> 职业：
type="button" value="https://www.it610.com/article/添加用户" id="addUsers" />value="https://www.it610.com/article/更新用户" id="updateUser" />

用户名	性别	职业	操作

< /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 = https://www.it610.com/article/userName.value;
tds[1].firstChild.nodeValue = https://www.it610.com/article/userSex.value;
tds[2].firstChild.nodeValue = https://www.it610.com/article/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 = https://www.it610.com/article/td.firstChild.nodeValue;
} else if (i == 1) {
userSex.value = https://www.it610.com/article/td.firstChild.nodeValue;
} else if (i == 2) {
userRole.value = https://www.it610.com/article/td.firstChild.nodeValue;
}
}
}
};
td4.appendChild(delBtn);
td4.appendChild(updateBtn);
【js实现user增删改查】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 + "]页";
}