<!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. JDK、JRE与JVM的关系

  2. [UE4]蓝图的颜色

    一.蓝色:调用的函数或事件 二.绿色:纯函数 三.紫色:函数定义 四.灰色:宏 五.白色:执行线 六.事件的定义 另外还有数据类型的颜色: 执行线是白色,数据线颜色跟数据量类型一致.

  3. JDK8 Java 中遇到null 和为空的情况，使用Optional来解决。

    空指针是我们最常见也最讨厌的异常,写过 Java 程序的同学,一般都遇到过 NullPointerException :) 初识null 详细可以参考[jdk 1.6 Java.lang.Null.P ...

  4. mysql 5.7主从库复制设置

    先要修改配置文件,重启mysql服务 log-bin= mysql-binlog # 打开二进制日志 ,最好放在不同的硬盘上,减小 IO 消耗 expire_logs_day= # 设置二进制日志保存 ...

  5. 第7课 列表初始化（2）_分析initializer_list<T>的实现

    1. 初始化列表的实现 (1)当编译器看到{t1,t2…tn}时便会生成一个initializer_list<T>对象(其中的T为元素的类型),它关联到一个array<T,n> ...

  6. ThreadException

    在windows窗体程序中,使用 ThreadException 事件来处理 UI 线程异常,使用 UnhandledException 事件来处理非 UI 线程异常.ThreadException可 ...

  7. delphi EncdDecd.pas单元中Encoding方法出现#$D#$A的解决方法

    例如: s:= 'http://detail.tmall.com/item.htm?id=45545826531&abbucket=_AB-M129_B17&acm=03130.100 ...

  8. SSH2 No Session found for current thread原因

    Hibernate4 与 spring3 集成之后, 如果在取得session 的地方使用了getCurrentSession, 可能会报一个错:“No Session found for curre ...

  9. admin源码解析以及仿照admin设计stark组件

    ---恢复内容开始--- admin源码解析 一 启动:每个APP下的apps.py文件中. 首先执行每个APP下的admin.py 文件. def autodiscover(): autodisco ...

  10. FreeMarker的空值运算符和逻辑运算符

    1.空值处理运算符 如果你在模板中使用了变量但是在代码中没有对变量赋值,那么运行生成时会抛出异常.但是有些时候,有的变量确实是null,怎么解决这个问题呢? 判断某变量是否存在:“??” 用法为:va ...