编程 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的写法不同导致的兼容性问题的解决方法

Jul 29 Javascript

情人节专属纯js脚本1k大小的3D玫瑰效果

Feb 11 Javascript

通过上下左右键和回车键切换光标实现代码

Mar 08 Javascript

javascript原生和jquery库实现iframe自适应高度和宽度

Jul 18 Javascript

jquery实现标签支持图文排列带上下箭头按钮的选项卡

Mar 14 Javascript

javascript实现10个球随机运动、碰撞实例详解

Jul 08 Javascript

onmouseover事件和onmouseout事件全面理解

Aug 15 Javascript

js实现省份下拉菜单效果

Feb 15 Javascript

vue.js组件vue-waterfall-easy实现瀑布流效果

Aug 22 Javascript

客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解

Aug 26 Javascript

jQuery-ui插件sortable实现自由拖动排序

Dec 01 jQuery

js实现多张图片每隔一秒切换一张图片

Jul 29 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 操作调试的方法

2012/07/12 PHP

PHP实现图片自动清理的方法

2015/07/08 PHP

PHP数组常用函数实例小结

2018/08/20 PHP

(function(){})()的用法与优点

2007/03/11 Javascript

ext form 表单提交数据的方法小结

2008/08/08 Javascript

HTML node相关的一些资料整理

2010/01/01 Javascript

JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法

2011/05/28 Javascript

js关闭子窗体刷新父窗体实现方法

2012/12/04 Javascript

自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

2012/12/12 Javascript

Js nodeType 属性全面解析

2013/11/14 Javascript

parentElement,srcElement的使用小结

2014/01/13 Javascript

nodejs的10个性能优化技巧

2014/07/15 NodeJs

JS实现自定义简单网页软键盘效果代码

2015/11/05 Javascript

IE6-IE9使用JSON、table.innerHTML所引发的问题

2015/12/22 Javascript

Bootstrap CSS布局之表单

2016/12/17 Javascript

React 项目迁移 Webpack Babel7的实现

2018/09/12 Javascript

使用Angular自定义字段校验指令的方法示例

2019/02/01 Javascript

JQuery复选框全选效果如何实现

2020/05/08 jQuery

原生js实现五子棋游戏

2020/05/28 Javascript

[01:14:05]《加油DOTA》第四期

2014/08/25 DOTA

Pandas透视表（pivot_table）详解

2019/07/22 Python

tensorflow使用指定gpu的方法

2020/02/04 Python

Django中modelform组件实例用法总结

2020/02/10 Python

python函数调用,循环,列表复制实例

2020/05/03 Python

Java ExcutorService优雅关闭方式解析

2020/05/30 Python

六种酷炫Python运行进度条效果的实现代码

2020/07/17 Python

python利用后缀表达式实现计算器功能

2021/02/22 Python

CSS3控制HTML元素动画效果

2014/02/08 HTML / CSS

Free People中国官网：波西米亚风格女装服饰

2016/08/30 全球购物

Trip.com澳大利亚：在线旅行社

2019/12/01 全球购物

平安家庭示范户事迹

2014/06/02 职场文书

百日安全生产活动总结

2014/07/05 职场文书

纪念9.18事变演讲稿

2014/09/14 职场文书

2014年大学班级工作总结

2014/11/14 职场文书

Nginx 根据URL带的参数转发的实现

2021/04/01 Servers

Nginx location 和 proxy_pass路径配置问题小结

2021/09/04 Servers