往JSON本地存储表格添加数据时,会有规律的出现多余重复数据

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        table {
            width: 1000px;
            text-align: center;
        }

        th,
        td {
            height: 30px;
        }

        .tip {
            background-color: #2A4F55;
            width: 230px;
            height: 30px;
        }

        .addwindow {
            background-color: white;
            width: 230px;
            height: 187px;
            border: #2A4F55 1px solid;
            display: none;
            position: absolute;
            left: 35%;
            top: 35%;
            text-align: center;
        }

        .close {
            float: right;
            height: 30px;
            width: 30px;
            color: white;
            line-height: 30px;
            background-color: #2A4F55;
            border: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.0.js"></script>
    <script type="text/javascript">
        //文档加载事件
        var $getnum; //自增长序号
        var $getdata; //本地存储数组
        $(function() {
            //localStorage.clear();//清空本地数据             
            //创建表格
            createtable();
            //初始化表格
            Initialization();
            //显示新增窗口
            $(":button:eq(0)").click(adddata);
        })
        //创建表格
        function createtable() {
            var table = "<table border='1px'><thead><tr><th><input type='checkbox'></th><th>序号</th><th>姓名</th><th>电话</th><th>年龄</th></tr></thead><tbody>";
            for(var i = 0; i < 30; i++) {
                table += "<tr><td class = 'checkbox'></td><td class = 'id'></td><td class = 'name'></td><td class = 'phone'></td><td class = 'age'></td></tr>";
            }
            table += "</tbody></table>";
            $("body").append(table);
        }
        //初始化表格数据
        function Initialization() {
            //判断是否存在本地数据
            if(localStorage.data) {
                //存在本地数据时
                //获取本地数据
                var getdata = localStorage.data;
                var getnum = parseInt(localStorage.num);
                //把字符串转换成数组对象
                $getdata = JSON.parse(getdata);
                $getnum = JSON.parse(getnum);
                //在表格中显示数据
                addTable();
            } else {
                //不存在本地数据时,创建一个空数组并放入本地存储
                arrydata = [];
                //把数组转换成字符串
                var arrystr = JSON.stringify(arrydata);
                //把字符串放入本地存储
                localStorage.data = arrystr;
                localStorage.num = 1;
            }
        }
        //新增按钮功能设置
        function adddata() {
            $(":text:eq(1)").val(numgs());
            //点击新增按钮显示窗口
            $("#add").show();
            //点击关闭新增窗口
            $(".close:eq(0)").click(function() {
                $("#add").hide();
            })
            //添加按钮提交数据
            $(":button:eq(5)").click(function() {
                var id = $(":text:eq(1)").val();
                var name = $(":text:eq(2)").val();
                var phone = $(":text:eq(3)").val();
                var age = $(":text:eq(4)").val();
                //把添加的数据放入对象
                var obj = {
                    "id": id,
                    "name": name,
                    "phone": phone,
                    "age": age
                }
                //将对象放入数组
                $getdata[$getdata.length] = obj;
                //把数组转换成字符串放入本地存储
                localStorage.data = JSON.stringify($getdata);
                //在表格中显示数据
                Initialization();
                //自增序号
                localStorage.num = $getnum + 1;
                //清空输入窗
                //cleardata();
                //关闭窗口
                $("#add").hide();
            })
        }
        //清空输入窗
        function cleardata() {
            $(":text:eq(1)").val("");
            $(":text:eq(2)").val("");
            $(":text:eq(3)").val("");
            $(":text:eq(4)").val("");
        }
        //在表格显示数据
        function addTable() {
            for(var i = 0; i < $getdata.length; i++) {
                $(".checkbox:eq(" + i + ")").html("<input type='checkbox'/>");
                $(".id:eq(" + i + ")").html($getdata[i].id);
                $(".name:eq(" + i + ")").html($getdata[i].name);
                $(".phone:eq(" + i + ")").html($getdata[i].phone);
                $(".age:eq(" + i + ")").html($getdata[i].age);
            }
        }
        //自增长序号格式
        function numgs() {
            if(localStorage.num < 10) {
                localStorage.num = "00" + localStorage.num;
                return localStorage.num;
            } else if(localStorage.num < 100) {
                localStorage.num = "0" + localStorage.num;
                return localStorage.num;
            } else {
                localStorage.num = localStorage.num;
                return localStorage.num;
            }
        }
    </script>
</head>

<body>
    <button>新增</button>
    <button>修改</button>
    <button>删除</button>
    <input type="text" /><button>查询</button>
    <div id="add" class="addwindow">
        <div class="tip"><input type="button" value="X" class="close" /> </div><br /> 序号:
        <input type="text" /><br /> 姓名:
        <input type="text" /><br /> 电话:
        <input type="text" /><br /> 年龄:
        <input type="text" /><br /><br />
        <input type="button" value="添加" />
    </div>
</body>

图片说明


1个回答

$getdata这个数据你打印一下,这个$getdata里面就是重复的数据,循环出来肯定有重复数据。你的点击事件有问题,在父元素点击事件下还有两个点击事件,点击事件层层嵌套肯定会出问题,加上阻止冒泡事件应该可以,但我试了下不行。最终解决如下:
html:

<input type="button" value="添加" id="addRecord" onclick="addRecord()"/>

相应的js点击事件:

function addRecord() {
            var id = $(":text:eq(1)").val();
            var name = $(":text:eq(2)").val();
            var phone = $(":text:eq(3)").val();
            var age = $(":text:eq(4)").val();
            //把添加的数据放入对象
            var obj = {
                "id": id,
                "name": name,
                "phone": phone,
                "age": age
            }
            console.log(obj)
            //将对象放入数组
            var datas = JSON.parse(localStorage.data);
            datas.push(obj);
            // $getdata[$getdata.length] = obj;
            //把数组转换成字符串放入本地存储
            localStorage.data = JSON.stringify(datas);
            //在表格中显示数据
            Initialization();
            //自增序号
            localStorage.num = $getnum + 1;
            //清空输入窗
            //cleardata();
            //关闭窗口
            $("#add").hide();
        }

把这个点击事件放外面就行了。

立即提问
相关内容推荐