Java乔晓松-利用JavaScript实现js对user用户的分页和实现js对用户的增删改查操作
js_users.html文件的源代码：<script type="text/javascript" src="./js/users.js" charset="UTF-8"></script>
用户名： 性别：
id="userSex" /> 职业：
type="button" value="添加用户" id="addUsers" />
value="更新用户" id="updateUser" />
| 用户名 | 性别 | 职业 | 操作 |
|---|
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;) {
domsh
补充：Web开发 , 其他 ,上一个：Java乔晓松-ajax开发框架和XMLhttpRequest、responseText、responseXml和JSON的应用
下一个：Java乔晓松-ajax实现用户名和邮箱唯一验证实例(struts2框架和HIbernate)
- 更多JAVA疑问解答：
- java怎么在线读取ftp服务器上的文件内容
- 关于程序员的职业规划
- HTML和JSP矛盾吗？
- java小程序如何打包？
- java怎么split路径文件名？
- 关于Hibernate实体自身多对一的抓取问题
- 关于apache2+tomcat群集出现的问题
- SSH 导入导出excel 谁有这块的资料吗?
- springmvc 加载一个jsp页面执行多个方法 报404
- 关于用jquery 导入 excel
- java对时间进行循环放到List中
- 一个图片的输入输出程序，第一次调用某方法会中断，第二次调用则正常
- 请上过传智播客的人说一下传智播客怎么样呀！是不是像它说的那样好呀！
- spring的schema怎么配置
- 【菜鸟求助】SSH中怎么从JSP页面往后台传值呢