Java乔晓松-利用JavaScript兑现js对user用户的分页和实现js对用户的增删改查操作
日期：2014-05-16 浏览次数：20347 次
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);
&n
