ホームページ  >  記事  >  ウェブフロントエンド  >  JSON_jqueryを操作するjQueryのCRUD使用例

JSON_jqueryを操作するjQueryのCRUD使用例

WBOY
WBOYオリジナル
2016-05-16 16:13:101402ブラウズ

この記事の例では、JSON を操作するための jQuery の CRUD の使用法について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:
 
 
 
 
Jquery ui 
 
 
 
 
// 著者: Eric Liang
 
     
             
                     
                         
                             
                         
                           
                         
                     
             
     
    id:  
    名前:  
    性別:  
    年齢:  
     

 
    id:  
    名前:  
    性別:  
    年齢:  
   
 
 
<スクリプト> 
 
<スクリプトタイプ="text/javascript"> 
       var jsonObj = { 先生: [
 { id:'1'、名前: "エリック"、性別: "m"、年齢: "40" }、
 { id:'2'、名前: "ゴースト"、性別: "m"、年齢: "28" }、
 { id:'3'、名前: "Didi"、性別: "m"、年齢: "27" }
    ]}; 
 リフレッシュ(); 
 関数fresh() {
  var 人 = 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 = ""; 
   var nameTd = ""; 
   var sexTd = ""; 
   var ageTd = ""; 
   var deleteAction = "" 
   var updateAction = "" 
   //alert(deleteAction);
   var trStr = "" idTd;
   trStr = 名前Td; 
   trStr = セックスTd; 
   trStr = 年齢Td; 
   trStr = 削除アクション; 
   trStr = updateAction; 
   //アラート(trStr); 
   $('#personform').append(trStr); 
      }
 }
 function checkPersonExist(targetId) {
  var 人 = jsonObj.Teacher; 
  for(var i=0; i    var cur_person = 人[i]; 
   if(cur_person.id == targetId) {
        alert("追加失败! Id" targetId "已经存在!"); 
        false を返します;
   }
  }
  true を返します。 
 }
 function addperson() {
    var userid = $('#userid').val(); 
    var flag = checkPersonExist(ユーザーID); 
    if(フラグ == false) {
   false を返します。 
    }
      var ユーザー名 = $('#ユーザー名').val(); 
      var セックス = $('#sex').val(); 
      var age = $('#age').val(); 
      var newPerson = "{id:" "'" ユーザー ID "'" "," "name:" "'" ユーザー名 "'" "," "性別:" "'" 性別 "'" "," "年齢:" "'" 年 "'" "}"; 
      新しい人 = eval("(" 新しい人 ")"); 
      //$('#personform').append(trStr); 
      jsonObj.Teacher.push(newperson); 
      リフレッシュ(); 
 }
 function deleteperson(obj) {
  //アラート(obj.name); 
  var delId = obj.name; 
  var 人 = jsonObj.Teacher; 
  for(var i=0; i    var cur_person = 人[i]; 
   if(cur_person.id == delId) {
        people.splice(i,1);
   }
  }
  リフレッシュ(); 
 }
 function updateperson(targetId) {
      var updateId = targetId.name; 
      var 人 = 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); 
   }
  }
 }
 関数 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 人 = jsonObj.Teacher
for(var i=0; i var userId = person[i].id;
If(cur_id == userId) {
person[i].name = cur_name; 人[i].age = cur_age
people[i].sex = cur_sex
} }
リフレッシュ(); }



この記事が皆さんの jQuery プログラミングに役立つことを願っています。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
id 
                       
名前セックス年齢アクションの削除更新アクション
" cur_id "" cur_name "" cur_sex "" cur_age "删除更新