JavaScript学习记录总结（七）——dom对象应用之用户简单管理

<!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">


<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>

效果：