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 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
js实现3D旋转效果
2020/08/18 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
带你认识Django
2019/01/15 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python持续监听文件变化代码实例
2020/07/22 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
文明学生事迹材料
2014/01/29 职场文书
建筑工地文明标语
2014/10/09 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
出纳岗位职责范本
2015/03/31 职场文书
学校证明范文
2015/06/24 职场文书
教师岗位说明书
2015/09/30 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书