编程 Javascript

jQuery操作JSON的CRUD用法实例

Posted in Javascript onFebruary 25, 2015

本文实例讲述了jQuery操作JSON的CRUD用法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  

<title>Jquery ui</title>  

<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />  

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>  

<script src="js/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>  

</head>  

// Author By Eric Liang   

<body>  

    <form>  

            <table border="1" id="personform">  

                    <tr>  

                        <td>id</id>  

                        <td>name</td>  

                        <td>sex</td>      

                        <td>age</td>  

                        <td>Delete Action</td>    

                        <td>Update Action</td>  

                    </tr>  

            </table>  

    </form>  

    id:   <input type="text" id="userid" />  

    name: <input type="text" id="username"/>  

    sex:  <input type="text"  id="sex"/>  

    age:  <input type="text"  id="age"/>  

    <input type="button" value="add" onclick="addperson()"/>  

</br>  

    id:   <input type="text" id="update_userid" disabled="disabled" />  

    name: <input type="text" id="update_username"/>  

    sex:  <input type="text"  id="update_sex"/>  

    age:  <input type="text"  id="update_age" />  

    <input type="button" value="update" onclick="update()"/>  

</body>  

</html>  

<script>  

</script>  

<script type="text/javascript">  

       var jsonObj = { teacher: [  

 { id:'1', name: "Eric", sex: "m", age: "40" },  

 { id:'2', name: "Ghost", sex: "m", age: "28" },  

 { id:'3', name: "Didi", sex: "m", age: "27" }  

    ]};  

 refresh();  

 function refresh() {  

  var persons = jsonObj.teacher;  

  $("tr[name='person']").remove();  

  for(var i=0; i<persons.length; i++) {  

   var cur_person = persons[i];  

   var cur_name = cur_person.name;  

   var cur_sex = cur_person.sex;  

   var cur_age = cur_person.age;  

   var cur_id = cur_person.id;  

   var idTd = "<td>"+ cur_id +"</td>";  

   var nameTd = "<td>"+ cur_name +"</td>";  

   var sexTd = "<td>"+ cur_sex +"</td>";  

   var ageTd = "<td>"+ cur_age +"</td>";  

   var deleteAction = "<td><a href='#' onclick='deleteperson(this)' name='";  

   deleteAction += cur_id +"'" +"</a>删除</td>"  

   var updateAction = "<td><a href='#' onclick='updateperson(this)' name='";  

   updateAction += cur_id +"'" +"</a>更新</td>"  

   //alert(deleteAction);

   var trStr = "<tr name='person'>" + idTd;

   trStr += nameTd;  

   trStr += sexTd;  

   trStr += ageTd;  

   trStr += deleteAction;  

   trStr += updateAction;  

   //alert(trStr);  

   $('#personform').append(trStr);  

      }  

 }  

 function checkPersonExist(targetId) {  

  var persons = jsonObj.teacher;  

  for(var i=0; i<persons.length; i++) {  

   var cur_person = persons[i];  

   if(cur_person.id == targetId) {  

        alert("添加失败! Id"+ targetId + "已经存在!");  

        return false;

   }

  }  

  return true;  

 }  

 function addperson() {  

    var userid = $('#userid').val();  

    var flag = checkPersonExist(userid);  

    if(flag == false) {  

   return false;  

    }  

      var username = $('#username').val();  

      var sex = $('#sex').val();  

      var age = $('#age').val();  

      var newPerson = "{id:" + "'"+userid+"'" +","+ "name:"+ "'"+username+"'"+","+ "sex:"+"'"+sex + "'"+"," + "age:"+"'"+age+"'" +"}";  

      newPerson = eval("(" + newPerson + ")");  

      //$('#personform').append(trStr);  

      jsonObj.teacher.push(newPerson);  

      refresh();  

 }  

 function deleteperson(obj) {  

  //alert(obj.name);  

  var delId = obj.name;  

  var persons = jsonObj.teacher;  

  for(var i=0; i<persons.length; i++) {  

   var cur_person = persons[i];  

   if(cur_person.id == delId) {  

        persons.splice(i,1);

   }  

  }  

  refresh();  

 }  

 function updateperson(targetId) {  

      var updateId = targetId.name;  

      var persons = jsonObj.teacher;  

      for(var i=0; i<persons.length; i++) {  

   var cur_person = persons[i];  

   if(cur_person.id == updateId) {  

        var cur_id = cur_person.id  

        var cur_name = cur_person.name;  

        var cur_sex = cur_person.sex; 

        var cur_age = cur_person.age; 

        $('#update_userid').attr('value',cur_id);  

        $('#update_username').attr('value',cur_name);  

        $('#update_sex').attr('value',cur_sex);  

        $('#update_age').attr('value',cur_age);  

   }  

  }  

 }  

 function update() {  

      var cur_id = $('#update_userid').val();  

      var cur_name = $('#update_username').val();  

      var cur_sex = $('#update_sex').val();  

      var cur_age = $('#update_age').val();  

      var persons = jsonObj.teacher;  

      for(var i=0; i<persons.length; i++) {  

       var userId = persons[i].id;  

       if(cur_id == userId) {  

        persons[i].name = cur_name;  

        persons[i].age = cur_age;  

        persons[i].sex = cur_sex;  

       }  

      }  

      refresh();  

 }  

</script>

希望本文所述对大家的jQuery程序设计有所帮助。

- Author -

erix1991

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery实现的可隐藏重现的靠边悬浮层实例代码

May 27 Javascript

javascript字符串替换函数如何一次性全部替换掉

Oct 30 Javascript

jquery实现鼠标悬浮停止轮播特效

Aug 20 Javascript

AngularJS入门教程之AngularJS模型

Apr 18 Javascript

js+html5实现canvas绘制网页时钟的方法

May 21 Javascript

react.js 翻页插件实例代码

Jan 19 Javascript

基于canvas的二维码邀请函生成插件

Feb 14 Javascript

Vue框架中正确引入JS库的方法介绍

Jul 30 Javascript

js实现会跳动的日历效果(完整实例)

Oct 18 Javascript

详解vue-cli之webpack3构建全面提速优化

Dec 25 Javascript

在vue中,v-for的索引index在html中的使用方法

Mar 06 Javascript

JS实现获取数组中最大值或最小值功能示例

Mar 02 Javascript

javascript实现复选框超过限制即弹出警告框的方法

Feb 25 #Javascript

javascript获得当前的信息的一些常用命令

Feb 25 #Javascript

javascript实现图像循环明暗变化的方法

Feb 25 #Javascript

JS往数组中添加项性能分析

Feb 25 #Javascript

浅谈JavaScript中的String对象常用方法

Feb 25 #Javascript

JS实现点击颜色块切换指定区域背景颜色的方法

Feb 25 #Javascript

提交按钮的name＝'submit'引起的js失效问题及原因

Feb 25 #Javascript

You might like

php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题

2014/06/19 PHP

PHP实现文件上传和多文件上传

2015/12/24 PHP

php中照片旋转 (orientation) 问题的正确处理

2017/02/16 PHP

PHP中define() 与 const定义常量的区别详解

2019/06/25 PHP

JavaScript窗口功能指南之在窗口中书写内容

2006/07/21 Javascript

一个对于Array的简单扩展

2006/10/03 Javascript

event对象的方法兼容多浏览器

2009/06/27 Javascript

jquery入门必备的基本认识及实例(整理)

2013/06/24 Javascript

使用FlexiGrid实现Extjs表格效果方法分享

2014/12/16 Javascript

jQuery应用之jQuery链用法实例

2015/01/19 Javascript

基于canvas实现的绚丽圆圈效果完整实例

2016/01/26 Javascript

每日十条JavaScript经验技巧(一)

2016/06/23 Javascript

javascript特效实现——当前时间和倒计时效果的简单实例

2016/07/20 Javascript

javascript数字验证的实例代码(推荐)

2016/08/20 Javascript

JavaScript中 DOM操作方法小结

2017/04/25 Javascript

parabola.js抛物线与加入购物车效果的示例代码

2017/10/25 Javascript

微信小程序局部刷新触发整页刷新效果的实现代码

2018/11/21 Javascript

JS监听滚动和id自动定位滚动

2018/12/18 Javascript

[00:57]林俊杰助阵DOTA2亚洲邀请赛

2015/01/28 DOTA

实例探究Python以并发方式编写高性能端口扫描器的方法

2016/06/14 Python

Python 给某个文件名添加时间戳的方法

2018/10/16 Python

Python中的wordcloud库安装问题及解决方法

2020/05/27 Python

pyMySQL SQL语句传参问题,单个参数或多个参数说明

2020/06/06 Python

ivx平台开发之不用代码实现一个九宫格抽奖功能

2021/01/27 HTML / CSS

现代家居用品及礼品：LBC Modern

2018/06/24 全球购物

不假外出检讨书

2014/01/27 职场文书

21岁生日感言

2014/02/27 职场文书

三年级学生评语

2014/04/23 职场文书

地质灾害防治方案

2014/05/14 职场文书

党员教师四风自我剖析材料

2014/09/30 职场文书

小石潭记导游词

2015/02/03 职场文书

学期个人自我总结

2015/02/13 职场文书

求职简历自荐信怎么写

2015/03/26 职场文书

酒店员工管理制度

2015/08/05 职场文书

工作简历的自我评价

2019/05/16 职场文书

windows系统安装配置nginx环境

2022/06/28 Servers