首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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程序设计有所帮助。

jQuery操作JSON的CRUD用法实例

- Author -

erix1991

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

Javascript 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
Jul 31 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 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
限流器(1) 逻辑备份(1) 异步机制(1) 索引树扫描(1) springCloud(6) sql模式(1) into outfile(1) 全表扫描(1) 远程连接(2) 轮询锁(1)
You might like
PHP的全局错误处理详解
2016/04/25 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
2015/12/30 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
JS前端知识点 运算符优先级，URL编码与解码，String，Math，arguments操作整理总结
2019/06/27 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
教师批评与自我批评
2014/10/15 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
投资入股协议书
2016/03/22 职场文书