js的一个总括性案例

最新推荐文章于 2021-02-27 14:59:45 发布

Rampage_w

最新推荐文章于 2021-02-27 14:59:45 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/Rampage_w/article/details/100656951

版权

案例需求
1）点击“注册”按钮时，将数据添加到表格中
2）关闭页面，重新打开时，若已有注册用户，表格中需要显示已注册用户
3)点击“删除”按钮时，删除该用户

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 50px;}
        th,td{text-align: center;line-height: 35px;border: 1px solid gray;}
    </style>       
</head>
<body>
    <h2>用户注册</h2>
    <label for="">用户名：</label><input type="text" id="txt-name"><br>
    性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br>
    <label for="">密码</label> <input type="password" id="pwd1"><br>
    <label for="">重复密码</label> <input type="password" id="pwd2"><br>
    <label for="">电话：</label><input type="text" id="txt-tel"><br>
    <button>注册</button>

    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>性别</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>           
        </tbody>
    </table>

    <script>
        //查找元素
        var txtName=document.getElementById('txt-name');
        var radios=document.getElementsByName('sex');//性别
        var txtPwd1=document.getElementById('pwd1');
        var txtPwd2=document.getElementById('pwd2');
        var txtPhone=document.getElementById('txt-tel');
        var tbody=document.querySelector('tbody');//表格
        var KEY="userarr";//存储用户数据的key

        init();//初始化页面

        //注册
        document.querySelector('button').onclick=function(){
            //读取输入框中的内容
            var userName=txtName.value.trim();
            var pwd=txtPwd1.value.trim();
            var rePwd=txtPwd2.value.trim();
            var sex;//性别
            if(radios[0].checked){
                sex='男';
            }else{
                sex='女';
            }
            var tel=txtPhone.value.trim();
            //判断输入框是否由内容
            if(userName==''||pwd==""||rePwd==''||tel==''){
                alert('用户名、密码、电话均不能为空!');
                return;
            }
            if(rePwd!=pwd){
                alert('两次输入的密码不一致!');
                return ;
            }

            //将数据存储到本地
            var person=new Person(userName,pwd,tel,sex);
            saveData(person);
            //将数据添加到表格中
            addDataToTable(person);
        };

        //初始化页面
        function init(){
            var arr=getData();//从本地取数据
            if(arr.length==0){
                return;//本地无数据，不执行
            }
            //将本地数据显示到表格中
            arr.forEach(function(item){
                addDataToTable(item);
            });
        }

        //将数据存入本地
        function saveData(obj){
            var arr=getData();//取出本地保存的数据
            arr.push(obj);
            //将对象转换为字符串
            var s=JSON.stringify(arr);
            localStorage.setItem(KEY,s);
        }

        //从本地取数据
        function getData(){
            var s=localStorage.getItem(KEY);
            if(s==null){
                return [];//若为第一次使用，本地无数据，返回值为null,启用新数组
            }
            return JSON.parse(s);
        }

        //根据电话删除数据
        function delData(tel){
            var arr=getData();
            //遍历数据
            for(var i in arr){
                if(arr[i].tel===tel){
                    arr.splice(i,1);//删除该人
                    break;
                }
            }
            //将删除后的数据保存到本地
            localStorage.setItem(KEY,JSON.stringify(arr));
        }

        //将数据添加到表格中
        function addDataToTable(person){
            var tr=tbody.insertRow();
            addTd(tr,person.username);//添加用户名列
            addTd(tr,person.pwd);//添加密码列
            addTd(tr,person.sex);//性别
            addTd(tr,person.tel);//电话
            addDelTd(tr);//添加删除列
            tbody.appendChild(tr);//将行插入表格中
        }

        //tr 行对象   cnt 列内容
        function addTd(tr,cnt){
            var td=tr.insertCell();
            td.innerHTML=cnt;
            return td;
        }

        //add delete td
        function addDelTd(tr){
            var td=tr.insertCell();//创建列
            var link=document.createElement('a');
            link.href="javascript:void(0)";
            link.innerHTML='删除';
            link.onclick=function(){
                var myTr=this.parentNode.parentNode;
                //1.从表格中删除数据
                myTr.parentNode.removeChild(myTr);
                //2.将数据从本地移除                
                delData(myTr.children[3].innerHTML);
            };
            //将超链接放入列中
            td.appendChild(link);
            return td;
        }


        //构造函数
        function Person(username,pwd,tel,sex){
            this.username=username;
            this.pwd=pwd;
            this.tel=tel;
            this.sex=sex;
        }

    </script>
</body>

</html>

在这里插入图片描述

Rampage_w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的一个总括性案例

案例需求1）点击“注册”按钮时，将数据添加到表格中2）关闭页面，重新打开时，若已有注册用户，表格中需要显示已注册用户3)点击“删除”按钮时，删除该用户<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫