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

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

效果:

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

上一篇:Nginx--Windows环境下Nginx+tomcat配置(包括动静分离)


下一篇:React中useEffect的源码解读