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

<!DOCTYPE html>
<html>
<head>
<title>users.html</title>

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

效果：

JavaScript学习记录总结（七）——dom对象应用之用户简单管理的更多相关文章

JavaScript学习记录一
title: JavaScript学习记录一 toc: true date: 2018-09-11 18:26:52 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习记录四
title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习记录三
title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习记录二
title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
Javascript 解析字符串生成 XML DOM 对象。
Javascript 接收字符串生成 XML DOM 对象.实测对 Firefox .IE6 有效.可用于解析 ajax 的服务器响应结果,也可用于解析自定义字符串.1. [代码]函数 ppt模 ...
JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
JavaScript学习（5）-Image对象和动态HTML
JavaScript学习5 1.image 对象对象引用 document.images[n] document.images["imageName"] document.ima ...
JavaScript学习（2）：对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

随机推荐

2、IValueConverter应用
1.C#代码如下: public class logotoimgConverter:IValueConverter { //将logo转换为URI public object Convert(obje ...
android 录音的断点续传
系统没有暂停的功能只能把每次的录音进行拼接... package com.example.zrecord; import java.io.File;import java.io.FileInput ...
解决使用OCI连接oracle LNK2019: 无法解析的外部符号的问题
据我所知,在使用OCI连接Oracle时出现LNK2019: 无法解析的外部符号问题的情况有两种: 一.没有引入附加依赖项,右键项目->属性->配置属性->链接器->输入中添加 ...
hadoop shell 操作命令
shell操作命令: hdfs的路径,在core-site.xml中定义 <property> <name>fs.default.name</name> <v ...
SharePoint重置密码功能Demo
博客地址 http://blog.csdn.net/foxdave 本文将说明一个简单的重置SharePoint用户密码(NTLM Windows认证)的功能如何实现重置密码功能,实际上就是重置域用 ...
Python的平凡之路（1）
2016-07-26 一.Python简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.它的特点如下: 面向对象.解释语言.交互性.模块化.动态性.高级语言.可移植.可 ...
windows下将磁盘脱机，并在"我的电脑"下显示
方案一: .右键单击"我的电脑". 2.打开:管理-磁盘管理. 3.在右边出现的磁盘分区里,你想隐藏的分区上右键单击“更改驱动器名和路径”. 4.出现一个对话框,点击“删除”. 5 ...
一个有趣的IE内核检测网站
http://se.360.cn/v5/iecoretest.html 该网站能有效检测您浏览器的内核,以及版本,操作系统. 找到这个网址,是因为最近解决WebBrowser自动调节IE版本功能时发现 ...
PAT 07-2 A+B和C
有两个值得注意的地方:1.变长数组(VLA)的使用,没想到PAT上的OJ竟然支持C99,一开始不知道就没用,看了看别人的,既然,还是用吧, 它有一点我不太喜欢,它不能像一般数组那样在声明时通过赋一个0 ...
Ubuntu 14.10 下设置时间同步
在启动HBase机群的时候,发现了一个错误,因为机群时间不同步导致,所以要同步集群时间. Linux的时间分为System Clock(系统时间)和Real Time Clock (硬件时间,简称RT ...

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

JavaScript学习记录总结（七）——dom对象应用之用户简单管理的更多相关文章

随机推荐

热门专题