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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
vuex存值与取值的实例
Nov 06 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
浅谈克隆 JavaScript
Nov 02 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
phpmyadmin操作流程
2006/10/09 PHP
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
CSS常用网站布局实例
2008/04/03 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python 中split 和 strip的实例详解
2017/07/12 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python使用xpath实现图片爬取
2020/09/16 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
《满井游记》教学反思
2014/02/26 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
买房协议书
2014/04/11 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
家长会欢迎词
2015/01/23 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python