jQuery操作JSON的CRUD用法实例

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • JQUERY操作JSON实例代码

    JQUERY操作JSON实例代码

    1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据 2.jquery简单的dom操作 3.送本jquery的开发手册给大家(大家慢慢去研究) 准备工作: 首先,我们新建个网站(.net2.0就行). 1.在我们的项目中jquery的js文件. 2.新建一个htm文件,命名为dome.htm吧. 代码如下:(head区的js代码就是实现的全部代码,有详细注释) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • json定义及jquery操作json的方法

    一.背景 json是一种轻量级数据交换格式,非常利于Java服务与js的交互,本文将介绍json的简单定义和js如何解析json. 二.内容 1.json定义: 简单的json格式为[{"key1":"value1"},{"key2":"value2"}], []代表数组,{}代表数组中的数据对象,key1,key2是一个json对象中的key,一个json中key值唯一,value1,value2,是key键对应的值. 定义

  • jquery下json数组的操作实现代码

    今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,查阅了下相关JS中数组的操作一试果然很爽. 记录下来. 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[,

  • jQuery操作JSON的CRUD用法实例

    本文实例讲述了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/xht

  • jquery操作HTML5 的data-*的用法实例分享

    阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. jquery 里已经内置这个方法. 通过 $('#content').data('list'); 就能获取数据. 这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性. <!DOCTYPE HTML> <html> <

  • PHP+JQUERY操作JSON实例

    本文实例讲述了PHP+JQUERY操作JSON的方法.分享给大家供大家参考,具体如下: json.html 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>PHP Json传输数据</title> </head> <script type="te

  • jQuery高级编程之js对象、json与ajax用法实例分析

    jQuery高级编程之js对象、json与ajax用法实例分析

    本文实例讲述了jQuery高级编程之js对象.json与ajax用法.分享给大家供大家参考,具体如下: js对象 创建js对象的两种方式: 1.通过new Object创建: var p1 = new Object(); // 设置属性,和方法 p1.name = "张三"; p1.age = 13; p1.study = function(){ console.log(p1.name + "正在学习,葵花宝典"); } // 调用属性和方法 console.log

  • jquery siblings获取同辈元素用法实例分析

    本文实例讲述了jquery siblings获取同辈元素用法.分享给大家供大家参考,具体如下: jquery siblings 用于获得匹配集合中每个元素的同胞. 语法: .siblings(selector) 注:可以通过后面的可选参数选择器(selector)进行进一步筛选. 示例: 找到每个div的所有同辈元素. <p>Hello</p> <div> <span>www.jb51.net</span> </div> <p&

  • jQuery操作json常用方法示例

    本文实例讲述了jQuery操作json常用方法.分享给大家供大家参考,具体如下: 在项目中经常会用到获取json中的某个值,或者动态的创建一个json对象,今天简单的做了一个通用的js /** * json工具 */ var JsonUtil = (function(){ return { /** * 获取json中的单个值 */ getValue:function(jsonObject,name){ var value = ""; $.each(jsonObject,function

  • JQuery事件委托原理与用法实例分析

    本文实例讲述了JQuery事件委托原理与用法.分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作.事件委托首先可以极大的减少事件绑定次数,其次也可以让新加入的子集元素也拥有相同的操作. 一般绑定事件的写法以及事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • jQuery解析json格式数据简单实例

    本文实例讲述了jQuery解析json格式数据的方法.分享给大家供大家参考,具体如下: 我用的jquery版本是1.7.2,整合了json数据的解析功能,很早的版本是没有的,我记得那个时候,要么用js的for in来读取json字符串里面的数据,要么加载一个专门用来解析json字符串的JS文件. 例子: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js&qu

  • jquery将json转为数据字典的实例代码

    1.基础--定义json文件 { "userinfo": [ { "account":"15639864589" , "password":"123456789" , "email":"123456789@qq.com" }, { "account":"15652689689" , "password":&q

随机推荐