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 checkbox全选、取消全选实现代码
Mar 05 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
js常用正则表达式集锦
May 17 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
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP 时间日期操作实战
2011/08/26 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php常用数组函数实例小结
2016/12/29 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python制作词云的方法
2018/01/03 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python__name__原理及用法详解
2019/11/02 Python
Python猜数字算法题详解
2020/03/01 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python 基于opencv实现图像增强
2020/12/23 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
业务部门经理岗位职责
2014/02/23 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
环保标语大全
2014/06/12 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis