sponsored links

Javscript Json数据操作(数据增,删,改,查)

本示例演示了对Javascript json数据的操作,包括常用的增删改查,不利用其他js框架,方便简洁。

下面为详细测试页面代码,不多做介绍

view source
print?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.    <title>Json Test</title>
05.    <style type="text/css">
06.        div
07.        {
08.            padding: 10px;
09.            border: solid 1px #222;
10.            margin: 5px;
11.            ;
12.        }
13.    </style>
14. 
15.    <script type="text/javascript">
16.        // 存储用户对象的数据格式
17.        // [
18.        //  {'uid':'123','pwd':'123456'},
19.        //  {'uid':'124','pwd':'123456'},
20.        //  {'uid':'125','pwd':'123456'}
21.        // ]
22. 
23.        function $(obj) {
24.            return typeof (obj) == "string" ? document.getElementById(obj) : obj;
25.        }
26. 
27.        var json = [];//申明数字
28. 
29.        //添加新用户
30.        function add() {
31.            var uid = $('uid').value;
32.            var pwd = $('pwd').value;
33.            for (var i = 0; i < json.length; i++) {
34.                if (json[i].uid == uid) {
35.                    return;
36.                }
37.            }
38.            json.push({ "uid": uid, "pwd": pwd });
39.            show(json);
40.        }
41.        //删除用户
42.        function del() {
43.            var uid = $('uid').value;
44.            for (var i = 0; i < json.length; i++) {
45.                if (json[i].uid == uid) {
46.                    json.splice(i, 1);
47.                    break;
48.                }
49.            }
50.            show(json);
51.        }
52.        //更新用户密码
53.        function frs() {
54.            var uid = $('uid').value;
55.            var pwd = $('pwd').value;
56.            for (var i = 0; i < json.length; i++) {
57.                if (json[i].uid == uid) {
58.                    json[i].pwd = pwd;
59.                    break;
60.                }
61.            }
62.            show(json);
63.        }
64.        //显示用户列表
65.        function show(json) {
66.            var html = "";
67.            for (var i = 0; i < json.length; i++) {
68.                html += "UID:" + json[i].uid + ";PWD:" + json[i].pwd + "/r/n";
69.            }
70.            $('t').innerText = html;
71.        }
72.    </script>
73. 
74.</head>
75.<body>
76.    <input type="hidden" value="" id="selectedUsers" />
77.    <div>
78.        UID:<input type="text" id="uid" /> PWD:
79.        <input type="text" id="pwd" />
80.        <a href="javascript:void(0);" title="" onclick="add();">添加用户</a> <a
81. 
82.href="javascript:void(0);"
83.            title="" onclick="del();">删除用户</a> <a href="javascript:void(0);"
84. 
85.title="" onclick="frs();">更新用户</a>
86.    </div>
87.    <div>
88.        现有用户:
89.        <p id="t">
90.        </p>
91.    </div>
92.</body>
93.</html>
Tags:
  • c# 操作 XML增 ,删 , 改 , 查
    已知有一个XML文件(bookstore.xml)如下: <?xml version="1.0" encoding="gb2312"?> <bookstore> <book genre="fantasy" ISBN="2-3631-4"> &l ...
  • Android结合界面对Sqlite数据库做增,删,改,查.操作
      本实例是将数据库中数据查询出来在界面中用ListView显示,并增加菜单提示对数据做新增和删除操作.单选择一条记录单击时对此条记录做修改操作. 所用到的界面布局: 主界面ListActivity Xml代码 <?xml version="1.0" encoding="utf-8"?> <linea ...
  • JS操作图片(增,删,改)例子
    JS操作图片(增,删,改)例子
    JS操作图片增,删,改 例子,需要的朋友可以参考一下 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">& ...
  • 学习 linq to ADO.NET 实例笔记(二)增 / 删 / 改 / 查
    学习 linq to ADO.NET 实例笔记(二)增 / 删 / 改 / 查
      实体类: [Table(Name = "AA")] public class ClassDemo { [Column(IsPrimaryKey = true, UpdateCheck = UpdateCheck.Never, IsVersion = true)] public int Id { get; set; } [Column] ...
  • MVC EF 增 删 改 查
    using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data;using System.Data.SqlClient;using System.Data.OracleClient;using Mvc01.Models;n ...
  • Android应用学习记录通讯录的增,删,改,查
    


    		    Android应用学习记录通讯录的增,删,改,查
    最近两天在做通讯录的增删改查功能.原以为Android会将通讯录的所有数据都集合到一个数据库表中,然后知道其ContentProvider提供Uri后,通过ContentResolver的query(),insert(),update(),delete()方法直接操作数据库的数据, 一.权限 操作通讯录必须在AndroidManifest.xml中先添加2个 ...