JSON_jqueryを操作するjQueryのCRUD使用例-jsチュートリアル-php.cn

この記事の例では、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 プログラミングに役立つことを願っています。

id	名前	セックス	年齢	アクションの削除	更新アクション
" cur_id "	" cur_name "	" cur_sex "	" cur_age "	删除	更新