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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
解析php入库和出库
2013/06/25 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
layui表格数据重载
2019/07/27 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python统计日志ip访问数的方法
2015/07/06 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
探究python中open函数的使用
2016/03/01 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python csv模块使用方法代码实例
2019/08/29 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
django修改models重建数据库的操作
2020/03/31 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
中科方德软件测试面试题
2016/04/21 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
文员个人求职自荐信
2013/09/21 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
师德演讲稿范文
2014/05/06 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书