编程 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 js 获取时间差、时间格式具体代码

Jun 05 Javascript

javascript窗口宽高,鼠标位置,滚动高度(详细解析)

Nov 18 Javascript

jQuery实现的一个tab切换效果内部还嵌有切换

Aug 10 Javascript

常用jQuery代码分享

Jul 14 Javascript

网络传输协议（http协议）

Nov 18 Javascript

jQuery验证表单格式的使用方法

Jan 10 Javascript

Angular4的输入属性与输出属性实例详解

Nov 29 Javascript

ReactNative中使用Redux架构总结

Dec 15 Javascript

使用Vue自定义指令实现Select组件

May 24 Javascript

layer扩展打开/关闭动画的方法

Sep 23 Javascript

vue点击页面空白处实现保存功能

Nov 06 Javascript

探索浏览器页面关闭window.close()的使用详解

Aug 21 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

解决中英文字符串长度问题函数

2007/01/16 PHP

使用Composer安装Yii框架的方法

2016/03/15 PHP

php防止表单重复提交实例讲解

2019/02/11 PHP

PHP实现二维数组（或多维数组）转换成一维数组的常见方法总结

2019/12/04 PHP

js原生appendChild的bug解决心得分享

2013/07/01 Javascript

JavaScript设计模式之外观模式实例

2014/10/10 Javascript

SuperSlide标签切换、焦点图多种组合插件

2015/03/14 Javascript

JavaScript中isPrototypeOf函数作用和使用实例

2015/06/01 Javascript

bootstrap中的 form表单属性role="form"的作用详解

2017/01/20 Javascript

Vue 过渡（动画）transition组件案例详解

2017/01/22 Javascript

浅谈JS验证表单文本域输入空格的问题

2017/02/14 Javascript

vue2.0 子组件改变props值,并向父组件传值的方法

2018/03/01 Javascript

Layer弹出层动态获取数据的方法

2018/08/20 Javascript

解决vue项目nginx部署到非根目录下刷新空白的问题

2018/09/27 Javascript

javascript实现移动端触屏拖拽功能

2020/07/29 Javascript

VUE使用axios调用后台API接口的方法

2020/08/03 Javascript

python单链表实现代码实例

2013/11/21 Python

Centos5.x下升级python到python2.7版本教程

2015/02/14 Python

用Python编写一个简单的Lisp解释器的教程

2015/04/03 Python

Python使用Srapy框架爬虫模拟登陆并抓取知乎内容

2016/07/02 Python

对dataframe数据之间求补集的实例详解

2019/01/30 Python

python正则表达式匹配不包含某几个字符的字符串方法

2019/07/23 Python

Python函数的默认参数设计示例详解

2019/12/01 Python

python 如何读、写、解析CSV文件

2021/03/03 Python

Zavvi荷兰：英国大型音像制品和图书游戏零售商

2018/03/22 全球购物

怎样自定义一个异常类

2016/09/27 面试题

护士自我评价范文

2014/01/25 职场文书

法人授权委托书范本

2014/04/04 职场文书

七年级作文之我的梦想

2019/10/16 职场文书

详解MySQL的半同步

2021/04/22 MySQL

Go语言切片前或中间插入项与内置copy()函数详解

2021/04/27 Golang

浅谈Python实现opencv之图片色素的数值运算和逻辑运算

2021/06/23 Python

SpringBoot整合阿里云视频点播的过程详解

2021/12/06 Java/Android

InterProcessMutex实现zookeeper分布式锁原理

2022/03/21 Java/Android

【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER

2022/04/02 DOTA

JS setTimeout与setInterval的区别

2022/04/20 Javascript