<!DOCTYPE html>
<html>
<head>
<title>users.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//全局变量
var pages = 0;//总页数
var pagesize = 3;//每页显示数量
var startsize = 0;//每页开始显示的位置
var endsize = 0;//每页结束显示的位置
var nowpage = 1;//当前页
var countsize = 0;//总记录数
//保存添加的数据的数组
var users = new Array();
function addUser() {
//获取dom对象
var nameDom = getById("name");
var ageDom = getById("age");
//根据dom的属性获取value值
var nameValue = nameDom.value;
var ageValue = ageDom.value;
//根据name="sex" name属性的值获取节点对象
var sexsDom = document.getElementsByName("sex");
var sexValue = "";
//遍历
for (var i = 0; i < sexsDom.length; i++) {
var sexDom = sexsDom[i];//获取dom对象<input type="radio" value="男" name="sex"/>男
if (sexDom.checked) {
sexValue = sexDom.value;
}
}
//保存到数组中
users.push(new User(nameValue, ageValue, sexValue));
//数组发生变化 就应该重新计算
pagination();
};
//重新计算分页的数据
function pagination() {
//总记录数
countsize = users.length;
//总页数
pages=countsize%pagesize==0?countsize/pagesize:(countsize-countsize%pagesize)/pagesize+1;
if (nowpage <= 0) {
nowpage = 1; // 第一页
} else if (nowpage >pages) { // 如果当前页大于总页数 ,那么当前页应该等于总页数
nowpage = pages;
}
//每页开始的记录数
startsize=(nowpage-1)*pagesize;
//每页结束的记录数
endsize = (nowpage - 1) * pagesize + pagesize;
//显示分页相关的数据
getById("pageinfo").innerHTML = "总记录数是：" + countsize + ",总页数是:" + pages
+ ",当前页是:" + nowpage + ",开始的记录数是:" + startsize + ",结束的记录数是:"
+ endsize;
//重新显示数据
showUsers();
}
function showUsers() {
//获取要添加的位置 的dom节点对象
var showUsersDom = getById("showUsers");
//思考 非常简单 showUsersDom清空
for(var i=0;i<showUsersDom.childNodes.length;){
showUsersDom.removeChild(showUsersDom.childNodes[i]); //3 0 2 0 1 0 0
}
for (var i = startsize; i < endsize; i++) {
var user = users[i];
//创建行
var trDom = document.createElement("tr");
//创建列
var td1Dom = document.createElement("td");
var td2Dom = document.createElement("td");
var td3Dom = document.createElement("td");
var td4Dom = document.createElement("td");
//创建列的文本节点
var text1Dom = document.createTextNode(user.nameValue);
var text2Dom = document.createTextNode(user.ageValue);
var text3Dom = document.createTextNode(user.sexValue);
var deleteInputDom = document.createElement("input");
deleteInputDom.setAttribute("type", "button");
deleteInputDom.setAttribute("value", "删除");
deleteInputDom.setAttribute("id",i);
deleteInputDom.onclick=deleteUser;
var updateInputDom = document.createElement("input");
updateInputDom.setAttribute("type", "button");
updateInputDom.setAttribute("value", "更新");
//列中添加文本
td1Dom.appendChild(text1Dom);
td2Dom.appendChild(text2Dom);
td3Dom.appendChild(text3Dom);
td4Dom.appendChild(deleteInputDom);
td4Dom.appendChild(updateInputDom);
//行中添加列
trDom.appendChild(td1Dom);
trDom.appendChild(td2Dom);
trDom.appendChild(td3Dom);
trDom.appendChild(td4Dom);
showUsersDom.appendChild(trDom);
}
}
var deleteUser=function(){
//数组怎么删除尼
users.splice(this.id, 1);//删除数据
pagination();
};
//创建User对象的构造函数
function User(nameValue, ageValue, sexValue) {
this.nameValue = nameValue;
this.ageValue = ageValue;
this.sexValue = sexValue;
}
//简化名称
function getById(id) {
return document.getElementById(id);
};
//当窗体加载完毕触发的函数
window.onload = function() {
//获取按钮对象 注册点击事件
getById("firstPageBtn").onclick = firstPage;
getById("prePageBtn").onclick = prePage;
getById("nextPageBtn").onclick = nextPage;
getById("lastPageBtn").onclick = lastPage;
};
//首页处理
var firstPage = function() {
nowpage = 1;
pagination();//重新计算
};
//上一页的处理
var prePage = function() {
nowpage = nowpage - 1;
if (nowpage <= 1) {
nowpage = 1;
}
pagination();//重新计算
};
//下一页的处理
var nextPage = function() {
nowpage = nowpage + 1;
if (nowpage >= pages) {
nowpage = pages;
}
pagination();
};
//末页的处理
var lastPage = function() {
nowpage = pages;
pagination();
};
</script>
</head>
<body>
<div style="text-align: center">
<table border="1" align="center">
<tr>
<td>用户名：</td>
<td><input type="text" id="name" /></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" id="age" /></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" value="男" name="sex" />男 <input
type="radio" value="女" name="sex" checked="checked" />女</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="添加"
onclick="addUser()" /></td>
</tr>
</table>
</div>
<div>
<table border="1" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody id="showUsers"></tbody>
</table>
<div style="text-align: center">
<input type="button" id="firstPageBtn" value="首页" /> <input
type="button" id="prePageBtn" value="上一页" /> <input type="button"
id="nextPageBtn" value="下一页" /> <input type="button"
id="lastPageBtn" value="末页" /> <span id="pageinfo"></span>
</div>
</div>
</body>
</html>
效果：
