本文实例讲述了jQuery操作JSON的CRUD用法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: Jquery ui // Author By Eric Liang id name sex age Delete Action Update Action id: name: sex: age: id: name: sex: age: <br /> <br /> var jsonObj = { teacher: [ <br /> { id:'1', name: "Eric", sex: "m", age: "40" }, <br /> { id:'2', name: "Ghost", sex: "m", age: "28" }, <br /> { id:'3', name: "Didi", sex: "m", age: "27" } <br /> ]}; <br /> refresh(); <br /> function refresh() { <br /> var persons = jsonObj.teacher; <br /> $("tr[name='person']").remove(); <br /> for(var i=0; i<persons.length; i++) { <br /> var cur_person = persons[i]; <br /> var cur_name = cur_person.name; <br /> var cur_sex = cur_person.sex; <br /> var cur_age = cur_person.age; <br /> var cur_id = cur_person.id; <br /> var idTd = "<td>"+ cur_id +""; <br /> var nameTd = "<td>"+ cur_name +""; <br /> var sexTd = "<td>"+ cur_sex +""; <br /> var ageTd = "<td>"+ cur_age +""; <br /> var deleteAction = "<td><a href='#' onclick='deleteperson(this)' name='"; <br /> deleteAction += cur_id +"'" +"删除" <br /> var updateAction = "<td><a href='#' onclick='updateperson(this)' name='"; <br /> updateAction += cur_id +"'" +"更新" <br /> //alert(deleteAction);<br /> var trStr = "<tr name='person'>" + idTd;<br /> trStr += nameTd; <br /> trStr += sexTd; <br /> trStr += ageTd; <br /> trStr += deleteAction; <br /> trStr += updateAction; <br /> //alert(trStr); <br /> $('#personform').append(trStr); <br /> } <br /> } <br /> function checkPersonExist(targetId) { <br /> var persons = jsonObj.teacher; <br /> for(var i=0; i<persons.length; i++) { <br /> var cur_person = persons[i]; <br /> if(cur_person.id == targetId) { <br /> alert("添加失败! Id"+ targetId + "已经存在!"); <br /> return false;<br /> }<br /> } <br /> return true; <br /> } <br /> function addperson() { <br /> var userid = $('#userid').val(); <br /> var flag = checkPersonExist(userid); <br /> if(flag == false) { <br /> return false; <br /> } <br /> var username = $('#username').val(); <br /> var sex = $('#sex').val(); <br /> var age = $('#age').val(); <br /> var newPerson = "{id:" + "'"+userid+"'" +","+ "name:"+ "'"+username+"'"+","+ "sex:"+"'"+sex + "'"+"," + "age:"+"'"+age+"'" +"}"; <br /> newPerson = eval("(" + newPerson + ")"); <br /> //$('#personform').append(trStr); <br /> jsonObj.teacher.push(newPerson); <br /> refresh(); <br /> } <br /> function deleteperson(obj) { <br /> //alert(obj.name); <br /> var delId = obj.name; <br /> var persons = jsonObj.teacher; <br /> for(var i=0; i<persons.length; i++) { <br /> var cur_person = persons[i]; <br /> if(cur_person.id == delId) { <br /> persons.splice(i,1);<br /> } <br /> } <br /> refresh(); <br /> } <br /> function updateperson(targetId) { <br /> var updateId = targetId.name; <br /> var persons = jsonObj.teacher; <br /> for(var i=0; i<persons.length; i++) { <br /> var cur_person = persons[i]; <br /> if(cur_person.id == updateId) { <br /> var cur_id = cur_person.id <br /> var cur_name = cur_person.name; <br /> var cur_sex = cur_person.sex; <br /> var cur_age = cur_person.age; <br /> $('#update_userid').attr('value',cur_id); <br /> $('#update_username').attr('value',cur_name); <br /> $('#update_sex').attr('value',cur_sex); <br /> $('#update_age').attr('value',cur_age); <br /> } <br /> } <br /> } <br /> function update() { <br /> var cur_id = $('#update_userid').val(); <br /> var cur_name = $('#update_username').val(); <br /> var cur_sex = $('#update_sex').val(); <br /> var cur_age = $('#update_age').val(); <br /> var persons = jsonObj.teacher; <br /> for(var i=0; i<persons.length; i++) { <br /> var userId = persons[i].id; <br /> if(cur_id == userId) { <br /> persons[i].name = cur_name; <br /> persons[i].age = cur_age; <br /> persons[i].sex = cur_sex; <br /> } <br /> } <br /> refresh(); <br /> } <br /> 希望本文所述对大家的jQuery程序设计有所帮助。
