집 > 기사 > 웹 프론트엔드 > JSON_jquery를 운영하는 jQuery의 CRUD 사용 예

JSON_jquery를 운영하는 jQuery의 CRUD 사용 예

WBOY원래의: 2016-05-16 16:13:101378검색

이 문서의 예에서는 JSON을 작동하기 위해 jQuery를 CRUD로 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<머리>

Jquery UI

// 작성자: Eric Liang
<본문>
    <양식>










    id:
    이름:
    성별:
    연령:


    id:
    이름:
    성별:
    연령:


<스크립트>

<스크립트 유형="텍스트/자바스크립트">
       var jsonObj = { 교사: [
{ ID:'1', 이름: "Eric", 성별: "m", 나이: "40" },
{ id:'2', 이름: "유령", 성별: "m", 나이: "28" },
{ ID:'3', 이름: "디디", 성별: "m", 나이: "27" }
    ]};
새로 고치다();
함수 새로 고침() {
  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 = ""
   //경고(deleteAction);
   var trStr = "" idTd;
   trStr = 이름Td;
   trStr = 섹스Td;
   trStr = 연령Td;
   trStr = 삭제Action;
   trStr = 업데이트Action;
   //경고(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를 반환합니다.
   }
  }
  사실을 반환;
}
함수 addperson() {
    var userid = $('#userid').val();
    var flag = checkPersonExist(userid);
    if(플래그 == false) {
   거짓을 반환;
    }
      var 사용자 이름 = $('#username').val();
      var 섹스 = $('#sex').val();
      var 나이 = $('#age').val();
      var newPerson = "{id:" "'" 사용자 ID "'" "," "name:" "'" 사용자 이름 "'" "," "sex:" "'" sex "'" "," "age:" "'" 나이 "'" "}";
      newPerson = eval("(" newPerson ")");
      //$('#personform').append(trStr);
      jsonObj.teacher.push(newPerson);
      새로 고치다();
}
함수 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);
   }
  }
  새로 고치다();
}
함수 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);
   }
  }
}
함수 업데이트() {
      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 = people[i].id;
If(cur_id == userId) {
        명[i].name = cur_name
        명[i].age = cur_age
        명[i].sex = cur_sex
~ }
새로고침(); }

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：Jquery의 기본 객체 변환 및 문서 로딩 사용법 example_jquery다음 기사：Jquery의 기본 객체 변환 및 문서 로딩 사용법 example_jquery

ID	이름	섹스	나이	삭제 작업	업데이트 작업
" cur_id "	" cur_name "	" cur_sex "	" cur_age "	删除	새로운

JSON_jquery를 운영하는 jQuery의 CRUD 사용 예

관련 기사