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中.add()的使用分析
Apr 26 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
Angular 表单控件示例代码
2017/06/26 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
浅谈React高阶组件
2018/03/28 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python scatter函数用法实例详解
2020/02/11 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
小区门卫工作职责
2013/12/14 职场文书
学校创先争优活动总结
2014/08/28 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
银行授权委托书范本
2014/10/04 职场文书
万能检讨书
2015/01/27 职场文书
法人代表证明书范本
2015/06/18 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
创业计划书之寿司
2019/07/19 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android