编程 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 相关文章推荐

来自国外的14个图片放大编辑的jQuery插件整理

Oct 20 Javascript

js阻止冒泡及jquery阻止事件冒泡示例介绍

Nov 19 Javascript

Javascript中的匿名函数与封装介绍

Mar 15 Javascript

jQuery中trigger()与bind()用法分析

Dec 18 Javascript

基于JavaScript实现移除(删除)数组中指定元素

Jan 04 Javascript

jquery mobile开发常见问题分析

Jan 21 Javascript

深入理解Node.js 事件循环和回调函数

Nov 02 Javascript

JavaScript编写棋盘覆盖代码详解

Aug 28 Javascript

thinkjs 文件上传功能实例代码

Nov 08 Javascript

解决vue-cli创建项目的loader问题

Mar 13 Javascript

JS实现的缓冲运动效果示例

Apr 30 Javascript

jQuery实现点击滚动到指定元素上的方法分析

Mar 19 jQuery

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的FTP学习（一）

2006/10/09 PHP

PHP 飞信好友免费短信API接口开源版

2010/07/22 PHP

PHP实现原比例生成缩略图的方法

2016/02/03 PHP

又拍云异步上传实例教程详解

2016/04/19 PHP

PHP实现的函数重载功能示例

2018/08/03 PHP

asp.net下利用js实现返回上一页的实现方法小集

2009/11/24 Javascript

给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

2013/06/09 Javascript

javascript获取元素偏移量的方法有哪些

2014/06/24 Javascript

node.js中的fs.lchown方法使用说明

2014/12/16 Javascript

jQuery实现企业网站横幅焦点图切换功能实例

2015/04/30 Javascript

javascript中数组方法汇总

2015/07/07 Javascript

Javascript获取数组中的最大值和最小值的方法汇总

2016/01/01 Javascript

搞定immutable.js详细说明

2016/05/02 Javascript

vue图片加载与显示默认图片实例代码

2017/03/16 Javascript

详解使用fetch发送post请求时的参数处理

2017/04/05 Javascript

关于jQuery中fade(),show()起始位置的一点小发现

2017/04/25 jQuery

微信小程序本地数据读取实例

2017/04/27 Javascript

基于Vuejs和Element的注册插件的编写方法

2017/07/03 Javascript

JavaScript实现设置默认日期范围为最近40天的方法分析

2017/07/12 Javascript

nodejs对express中next函数的一些理解

2017/09/08 NodeJs

关于laydate.js加载laydate.css路径错误问题解决

2017/12/27 Javascript

JS实现深度优先搜索求解两点间最短路径

2019/01/17 Javascript

JQuery表单元素取值赋值方法总结

2020/05/12 jQuery

[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1

2014/07/15 DOTA

Windows下实现Python2和Python3两个版共存的方法

2015/06/12 Python

python pyheatmap包绘制热力图

2018/11/09 Python

python requests.post带head和body的实例

2019/01/02 Python

Pytorch 解决自定义子Module .cuda() tensor失败的问题

2020/06/23 Python

完美解决TensorFlow和Keras大数据量内存溢出的问题

2020/07/03 Python

Python3使用tesserocr识别字母数字验证码的实现

2021/01/29 Python

pyx文件生成pyd 文件用于 cython调用的实现

2021/03/04 Python

卫校中专生的自我评价

2014/01/15 职场文书

建房协议书

2014/04/11 职场文书

2015新员工试用期工作总结

2014/12/12 职场文书

大学生英文求职信范文

2015/03/19 职场文书

JAVA 线程池(池化技术)的实现原理

2022/04/28 Java/Android