<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基础</title>

<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div>
<label for="name">姓名：</label><input id="name" name="name" type="text" /><br/>
<label for="date">日期：</label><input id="date" name="date" type="text" /><br/>
<a href="javascript:void(0)" onclick="add()">添加</a>
<a href="javascript:void(0)" onclick="find()">查询</a>

<div id = "result"></div>

--------------------------------------
<div id="edit">
<label for="name">姓名：</label><input class="name" name="name" type="text" /><br/>
<label for="date">日期：</label><input class="date" name="date" type="text" /><br/>
<label onclick="save()">保存</label>
</div>
</div>

<script>
var tickets = []; // [{"id":"1","name":"餐饮","date":"20181108"},{"id":"2","name":"火车票","date":"20181109"}]

//增加
function add(){
var name = document.getElementById("name").value;
var date = document.getElementsByName("date")[0].value;
var obj = {};
obj.id = tickets.length + 1;
obj.name = name;
obj.date = date;
console.log(JSON.stringify(obj));
tickets.push(obj);
console.log(tickets.length);
}

//查询
function find(){
var html = "";
for(var i = 0; i < tickets.length;i++){
html += "<p><label>"+tickets[i].id+"</label>|<label>" + tickets[i].name+ "</label>|<label>"+tickets[i].date+"</label> <label onclick='del(\""+tickets[i].id+"\")'>删除</label><label onclick='edit(\""+tickets[i].id+"\")'>修改</label></p>";
}
document.getElementById("result").innerHTML = html;
}

//修改
function edit(id){
var obj = null;
tickets.forEach(function(e){
if(e.id == id){
obj = e;
}
})
console.log(JSON.stringify(obj));
document.getElementsByClassName("name")[0].value = obj.name;
document.getElementsByClassName("date")[0].value = obj.date;
document.getElementById("edit").setAttribute("data-id",obj.id);
}

//保存
function save(){
// 待保存的id
var id = document.getElementById("edit").getAttribute("data-id");
var name = document.getElementsByClassName("name")[0].value;
var date = document.getElementsByClassName("date")[0].value;
tickets.forEach(function(e){
if(e.id == id){
e.name = name;
e.date = date;
}
})
}

//删除
function del(id){
console.log("id是" + id);
for(var i = 0; i < tickets.length;i++){
if(tickets[i].id == id){
tickets.splice(i,1);
}
}
}

</script>
</body>
</html>

js Json数组的增删改查的更多相关文章

  1. 【基础篇】js对本地文件增删改查--增

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  2. 【基础篇】js对本地文件增删改查--查

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  3. 【基础篇】js对本地文件增删改查--改

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  4. 【基础篇】js对本地文件增删改查--删

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  5. 使用 Json.Net 对Json文本进行 增删改查

    JSON 已经成为当前主流交互格式, 如何在C#中使用 Json.Net 对Json文本进行 增删改查呢?见如下代码 #region Create (从零创建) public static strin ...

  6. Shell数组的增删改查

    Shell数组的增删改查 shell数组的定义及取值: a=(1 2 3) [root@bogon tmp]# echo ${a[*]}  1 2 3 [root@bogon tmp]# echo $ ...

  7. 【基础篇】js对本地文件增删改查

    [基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查

  8. js数组的增删改查

    array 数组的增删改: push 从数组后面推入一个元素或多个元素 var arr = [1,2,3]; ​ // 返回:修改后数组的长度 arr.push(4,5,6); pop 删除数组最后一 ...

  9. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

随机推荐

  1. MySQL学习----多版本并发mvcc

    MySQL中的大多数事务性存储引擎实现的都不是简单的行级锁.基于提升并发性能的考虑,他们一般实现了多版本并发控制(mvcc).不仅是mysql,包括oracle,postgresql等其他数据库也实现 ...

  2. PHP中常用的数组函数总结

    整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数,数组的分段和填充,数组与栈,数组与列队,回调函数,排序,计算,其他的数组函数等. 一,数组操作的基本函数 数组的键名和值 array_va ...

  3. [UE4]删除UI：Remove from Parent

    同时要将保存UI的变量清空,以释放占用的系统内存

  4. mysql 8.0 错误The server requested authentication method unknown to the client

    mysql 安装了最新版本8.0.11后创建用户并授权后,授权的用户连接数据库提示 The server requested authentication method unknown to the ...

  5. c#day03

    c#中的随机数 Random random = new Random(); //随机1~200之间的一个数 random.Next(,); //怪兽:防御为10,血量为10 //玩家:随机8~12的攻 ...

  6. MySQL之 Mysqldump导出数据库

    参数大全 参数说明 --all-databases , -A 导出全部数据库. mysqldump -uroot -p --all-databases --all-tablespaces , -Y 导 ...

  7. OpenJudge 由中根顺序和后根序列重建二叉树

    题目内容: 我们知道如何按照三种深度优先次序来周游一棵二叉树,来得到中根序列.前根序列和后根序列.反过来,如果给定二叉树的中根序列和后根序列,或者给定中根序列和前根序列,可以重建一二叉树.本题输入一棵 ...

  8. 2018北美部分CS项目学费

    yearly cost from official website USC 城里 24credit about 49k + cost of room&food BU 城里 NEU 65k 城里 ...

  9. Unity中进程间通信——使用异步Socket

    开发Unity项目过程中,即时通信功能来完成服务器与客户端自定义的数据结构封装. 如果要序列化和数据封装参考:Unity3D之C#用Socket传数据包 蓝鸥3G封装的类 客户端脚本ClientScr ...

  10. ELK集群部署实例（转）

    转载自:http://blog.51cto.com/ckl893/1772287,感谢原博. 一.ELK说明 二.架构图 三.规划说明 四.安装部署nginx+logstash 五.安装部署redis ...