JavaScript数组,JSON对象实现动态添加、修改、删除功能示例


Posted in Javascript onMay 26, 2018

本文实例讲述了JavaScript数组,JSON对象实现动态添加、修改、删除功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>javascript里面的数组,json对象,动态添加,修改,删除示例</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var a = JSON.parse("{\"title\":\"\",\"data\":[]}");
var b = JSON.parse("{\"id\":\"2\"}");
var c = JSON.parse("{\"id\":\"3\"}");
var d = JSON.parse("{\"id\":\"4\"}");
var e = JSON.parse("{\"id\":\"5\"}");
var f = JSON.parse("{\"id\":\"6\"}");
function myObjectPush() {
debugger;
/* javascript里面的数组,json对象,动态添加,修改,
删除示例 只要适合Javascript的方法都是可以用在JSON对象的数组中的!
所以还有另外的方法splice( )进行crud操作!
*/
//增加属性
$(a).attr("id", "1");
//增加子对象
a.data.push(b);//数组最后加一条记录
a.data.push(c);
a.data.push(d);
a.data.unshift(d);//数组最前面加一条记录
//修改子对象及属性
a.title = "这是json名字";
//删除子对象
//json的删除有很多种,直接用过 delete json对象方式:
delete a.data[1];
a.data.pop(); //删除最后一项
a.data.shift(); //删除第一项
a.data.splice(0, 1); //删除指定子对象,参数:开始位置,删除个数
//替换不删除
a.data.splice(1, 0, e, f);//开始位置,删除个数,插入对象
//替换并删除 a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象
console.log(a);
}
</script>
</head>
<body onload="myObjectPush()">
</body>
</html>

运行结果:

JavaScript数组,JSON对象实现动态添加、修改、删除功能示例

Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JS跨域问题详解
Nov 25 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
vue.js的提示组件
Mar 02 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
angularJS开发注意事项
May 26 #Javascript
JavaScript继承与多继承实例分析
May 26 #Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
Vue仿支付宝支付功能
May 25 #Javascript
微信小程序实现人脸检测功能
May 25 #Javascript
微信小程序实现人脸识别
May 25 #Javascript
微信小程序实现刷脸登录
May 25 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
javascript 写类方式之四
2009/07/05 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
domReady的实现案例
2016/11/23 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
laypage.js分页插件使用方法详解
2019/07/27 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
自动化毕业生专业自荐书范文
2014/02/04 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
总经理任命书范本
2014/06/05 职场文书