1顯示的頁面：
代碼如下:
<!DOCTYPE html>
< html>
<head>
<title>js_pageusers.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/pageuser.js"></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 />
<br />
<input type="button" id="addUsers" value="添加用戶" />
<input type="button" id="updateUsers" value="更新用戶" />
</div>
<br />
<br />
<div>
<table border="1px" cellpadding="0" cellspacing="0" width="500px;">
<thead>
<th>
用戶名
</th>
<th>
性別
</th>
<th>
職業
</th>
</thead>
<tbody id="showUsers"></tbody>
</table>
<div>
<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>
</div>
</body>
</html>
2.
代碼如下:
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 domUserName = $("userName");
var domUserSex = $("userSex");
var domUserRole = $("userRole");
var domshowUsers = $("showUsers");
var addBtn = $("addUsers");
//為按鈕注冊事件
addBtn.onclick = function() {
//創建user對象
var user = new User(domUserName.value, domUserSex.value,
domUserRole.value);
//把user對象存放數組中
users.push(user);
recondsize = users.length; //得出總記錄數
//計算出總頁數
countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math
.ceil(recondsize / pagesize);
if (recondsize > pagesize) { //當總記錄大于pagezie 思路 從后往前數3個數
start = recondsize-pagesize;
end=recondsize;
}else{ // pagesize start =1;
start=0;
end=recondsize; //end=實際的個數 就是 recondsize
}
//調用顯示user的方法
showUser(users,start,end,recondsize,countpage,domshowUsers);
新聞熱點
疑難解答
圖片精選
