往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();
        }

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
android中想向本地服务器的json文件追加数据怎么写呢?
-
用asixo获取的数据怎么去更改本地json文件的数据?
-
利用json动态数据生成动态表格表头
-
js ajax获取json数据后,替换table表格中的值
-
如何把表格里的数据转变成json格式传送到后台数据库?
-
前端传来一个json格式的数据,我用的map接,然后我想在pojo类以String类型存到数据库,查询时再从数据库中查出转map返回,现在我不想不创建一个dto类,请问有更好的解决方法吗?
-
如何获取后台数据库里面的数据,返回JSON字符串,并把JSON字符串解析添加到ListView中
-
JS通过JSON.parse(JSON.stringify(obj))的方式深层拷贝数据时,数组类型有时候变为bool类型了?
-
jquery ajax 读取json数据存入表格中
-
js遍历json数据计算,对比另一条json,组成表格
-
IOS如何将复杂的json数据存储在沙盒中
-
layui无法渲染后端json数据
-
GOSN对象转JSON时影响数据库数据
-
怎么用 vue的axios中的get请求向后台发送json格式的数据
-
Hadoop存储分析Json数据
-
如何将.json格式数据存储到数据中?
-
询问大佬,怎么把Excle数据按照HTTP-POST协议转换成json数据类型发送到给定接口?
-
android中服务端与客服端对json数据读写操作,谢谢!
-
因为评论功能想要实现android客户端与服务端的交互解析json数据
-
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
《C++ Primer》学习笔记/习题答案 总目录
文章目录前言专栏C++学习笔记目录第一章 - 快速入门第二章 - 变量和基本类型第三章 - 标准库类型第四章 - 数组和指针第五章 - 表达式第六章 - 语句第七章 - 函数第八章 - 标准 IO 库第九章 - 顺序容器第十章 - 关联容器第十一章 - 泛型算法第十二章 - 类第十三章 - 复制控制第十四章 - 重载操作符与转换第十五章 - 面向对象编程第十六章 - 模板和泛型编程第十七章 - 用...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
七个开源的 Spring Boot 前后端分离项目,一定要收藏!
前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年,SSH 框架用的滚瓜烂熟,出来却发现自己依然没有任何优势! 其实前后端分离本身并不难,后段提供接口,前端做数据展示,关键是这种思想。很多人做惯了前后端不分的开发,在做前后端分离的时候,很容易带进来一...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
漫画:什么是摩尔斯电码?
摩尔斯电码是什么摩尔斯电码(Morse code),是1837年由美国人发明,本质上是一种对信息的编码,最初用于人们的远程通信。那个时候,人们连电话都还没发明出来,更不用...
Google离开我们快十年了
2010年1月13日,Google离开中国。掐指算来,Google已经离开我们快十年了。2010年是个特殊的年份,这一年还发生了3Q大战。为什么诸多大事都发生在2010年...
面试官的HTTP五连问法?我竟然回答不上来...
作者丨松若章来源丨http://1t.click/ataf曾经有这么一道经典面试题:从 URL 在浏览器被被输入到页面展现的过程中发生了什么?相信大多数准备过的同学都能回...
中国最顶级的一批程序员,从首富到首负!
过去的20年是程序员快意恩仇的江湖时代通过代码,实现梦想和财富有人痴迷于技术,做出一夜成名的产品有人将技术变现,创办企业成功上市这些早一代的程序员们创造的奇迹引发了一浪高...
为什么面向对象糟透了?
又是周末,编程语言“三巨头”Java, Lisp 和C语言在Hello World咖啡馆聚会。服务员送来咖啡的同时还带来了一张今天的报纸, 三人寒暄了几句, C语言翻开了...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
在线就能用的Linux我给你找好了
来源:公众号【编程珠玑】 作者:守望先生 网站:https://www.yanbinghu.com 前言 是不是不想装虚拟机,还想体验一下Linux?是不是自己的电脑不在,又想搞事情?今天给大家推荐几个在线就可以玩的Linux环境以及学习Shell的地方。 在线Linux环境 如果你不想安装虚拟机,这里提供几个在线就能把玩Linux的网站,他们不需要注册用户,可以直接使用。 Unix...
世界上最好的学习法:费曼学习法
你是否曾幻想读一遍书就记住所有的内容?是否想学习完一项技能就马上达到巅峰水平?除非你是天才,不然这是不可能的。对于大多数的普通人来说,可以通过笨办法(死记硬背)来达到学习的目的,但效率低下。当然,也可以通过优秀的学习法来进行学习,比如今天讲的“费曼学习法”,可以将你的学习效率极大的提高。 费曼学习法是由加拿大物理学家费曼所发明的一种高效的学习方法,费曼本身是一个天才,13岁自学微积分,24岁加入曼...
学Linux到底学什么
来源:公众号【编程珠玑】 作者:守望先生 网站:https://www.yanbinghu.com/2019/09/25/14472.html 前言 ​我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到底要学什么? 为什么要学Linux 在回答学什么之前,我们先看看为什么要学。首先我们需要认识到的是,很多服务器使用的是Linux系统,而作为服务器应...
深入理解C语言指针
一、指针的概念 要知道指针的概念,要先了解变量在内存中如何存储的。在存储时,内存被分为一块一块的。每一块都有一个特有的编号。而这个编号可以暂时理解为指针,就像酒店的门牌号一样。 1.1、变量和地址 先写一段简单的代码: void main(){ int x = 10, int y = 20; } 这段代码非常简单,就是两个变量的声明,分别赋值了 10、20。我们把内存当做一个酒店,而每个房间就...
C语言实现推箱子游戏
很早就想过做点小游戏了,但是一直没有机会动手。今天闲来无事,动起手来。过程还是蛮顺利的,代码也不是非常难。今天给大家分享一下~ 一、介绍 开发语言:C语言 开发工具:Dev-C++ 5.11 日期:2019年9月28日 作者:ZackSock 也不说太多多余的话了,先看一下效果图: 游戏中的人物、箱子、墙壁、球都是字符构成的。通过wasd键移动,规则的话就是推箱子的规则,也就不多说了。 二、代...
相关热词 c# 应用r包 c# excel格式刷 c# 监控word保存 c#中字符串排序 c# 打印方向 c# 获取根目录 c#语言文档 c#设置开机自启动 c# cpu id 主板 c# timer越来越卡