首頁 > web前端 > js教程 > jQuery運算JSON的CRUD用法實例_jquery

jQuery運算JSON的CRUD用法實例_jquery

WBOY
發布: 2016-05-16 16:13:10
原創
1409 人瀏覽過

本文實例講述了jQuery操作JSON的CRUD用法。分享給大家供大家參考。具體實作方法如下:

複製程式碼 程式碼如下:
 
 
 
 
Jquery ui標題> 
 
 
 
頭> 
// 作者:艾瑞克‧梁  
 
     
             
                     
                        id 
                        姓名時 
                        性別     
                        年齡 
                        移除作業   
                        更新作業 
                     
            表> 
    表格> 
    id:    
    名稱: 
    性別: 
    年齡: 
     
 
    id:   > 
    名稱: 
    性別: 
    年齡:  
   
正文> 
 
 
腳本> 
 
       var jsonObj = { 老師: [ 
 { id:'1', 姓名: "Eric", 性別: "m", 年齡: "40" }, 
 { id:'2', 姓名: "Ghost", 性別: "m", 年齡: "28" }, 
 { id:'3', 姓名: "迪迪", 性別: "男", 年齡: "27" } 
    ]}; 
 刷新(); 
 函數刷新(){ 
  var people = jsonObj.teacher; 
  $("tr[name='person']").remove(); 
  for(var i=0; i    var cur_person = 人[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 = "" cur_id ""; 
   var nameTd = "" cur_name ""; 
   var sexTd = "" cur_sex ""; 
   varageTd = "" cur_age ""; 
   var deleteAction = "刪除
   var updateAction = "更新
   //alert(deleteAction);
   var trStr = "" idTd;
   trStr = 名稱Td; 
   trStr = 性Td; 
   trStr = 年齡Td; 
   trStr = 刪除操作; 
   trStr = 更新作業; 
   //警報(trStr); 
   $('#personform').append(trStr); 
      } 
 } 
 函數 checkPersonExist(targetId) { 
  var people = jsonObj.teacher; 
  for(var i=0; i    var cur_person = 人[i]; 
   if(cur_person.id == targetId) { 
        alert("新增失敗!Id" targetId "已經存在!"); 
        回傳錯誤;
   }
  } 
  返回真; 
 } 
 函數 addperson() { 
    var userid = $('#userid').val(); 
    var flag = checkPersonExist(使用者ID); 
    if(flag == false) { 
   返回假; 
    } 
      var 使用者名稱 = $('#使用者名稱').val(); 
      var sex = $('#sex').val(); 
      var 年齡 = $('#age').val(); 
var newPerson = "{id:" "'" 使用者ID "'" "," "姓名:" "'" 使用者名稱"'" "," "性別:" "'" 性別"'" "," "年齡:" “'“ 年齡”'” ”}”; 
      newPerson = eval("("newPerson")"); 
      //$('#personform').append(trStr); 
      jsonObj.teacher.push(newPerson); 
      刷新(); 
 } 
 函數deleteperson(obj) { 
  //警報(物件名稱); 
  var delId = obj.name; 
  var people = jsonObj.teacher; 
  for(var i=0; i    var cur_person = 人[i]; 
   if(cur_person.id == delId) { 
        people.splice(i,1);
   } 
  } 
  刷新(); 
 } 
 函數 updateperson(targetId) { 
      var updateId = targetId.name; 
      var people = jsonObj.teacher; 
      for(var i=0; i    var cur_person = 人[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); 
   } 
  } 
 } 
 函數更新(){ 
      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        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(); 
 } 

希望本文所述對大家的jQuery程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板