jQuery操作JSON的CRUD用法实例
更新时间：2015年02月25日 16:12:59 作者：erix1991
这篇文章主要介绍了jQuery操作JSON的CRUD用法,实例分析了jQuery进行CURD的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery操作JSON的CRUD用法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery ui</title>
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
</head>
// Author By Eric Liang
<body>
<form>
<table border="1" id="personform">
<tr>
<td>id</id>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>Delete Action</td>
<td>Update Action</td>
</tr>
</table>
</form>
id: <input type="text" id="userid" />
name: <input type="text" id="username"/>
sex: <input type="text" id="sex"/>
age: <input type="text" id="age"/>
<input type="button" value="add" onclick="addperson()"/>
</br>
id: <input type="text" id="update_userid" disabled="disabled" />
name: <input type="text" id="update_username"/>
sex: <input type="text" id="update_sex"/>
age: <input type="text" id="update_age" />
<input type="button" value="update" onclick="update()"/>
</body>
</html>
<script>
</script>
<script type="text/javascript">
var jsonObj = { teacher: [
{ id:'1', name: "Eric", sex: "m", age: "40" },
{ id:'2', name: "Ghost", sex: "m", age: "28" },
{ id:'3', name: "Didi", sex: "m", age: "27" }
]};
refresh();
function refresh() {
var persons = jsonObj.teacher;
$("tr[name='person']").remove();
for(var i=0; i<persons.length; i++) {
var cur_person = persons[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 = "<td>"+ cur_id +"</td>";
var nameTd = "<td>"+ cur_name +"</td>";
var sexTd = "<td>"+ cur_sex +"</td>";
var ageTd = "<td>"+ cur_age +"</td>";
var deleteAction = "<td><a href='#' onclick='deleteperson(this)' name='";
deleteAction += cur_id +"'" +"</a>删除</td>"
var updateAction = "<td><a href='#' onclick='updateperson(this)' name='";
updateAction += cur_id +"'" +"</a>更新</td>"
//alert(deleteAction);
var trStr = "<tr name='person'>" + idTd;
trStr += nameTd;
trStr += sexTd;
trStr += ageTd;
trStr += deleteAction;
trStr += updateAction;
//alert(trStr);
$('#personform').append(trStr);
}
}
function checkPersonExist(targetId) {
var persons = jsonObj.teacher;
for(var i=0; i<persons.length; i++) {
var cur_person = persons[i];
if(cur_person.id == targetId) {
alert("添加失败! Id"+ targetId + "已经存在!");
return false;
}
}
return true;
}
function addperson() {
var userid = $('#userid').val();
var flag = checkPersonExist(userid);
if(flag == false) {
return false;
}
var username = $('#username').val();
var sex = $('#sex').val();
var age = $('#age').val();
var newPerson = "{id:" + "'"+userid+"'" +","+ "name:"+ "'"+username+"'"+","+ "sex:"+"'"+sex + "'"+"," + "age:"+"'"+age+"'" +"}";
newPerson = eval("(" + newPerson + ")");
//$('#personform').append(trStr);
jsonObj.teacher.push(newPerson);
refresh();
}
function deleteperson(obj) {
//alert(obj.name);
var delId = obj.name;
var persons = jsonObj.teacher;
for(var i=0; i<persons.length; i++) {
var cur_person = persons[i];
if(cur_person.id == delId) {
persons.splice(i,1);
}
}
refresh();
}
function updateperson(targetId) {
var updateId = targetId.name;
var persons = jsonObj.teacher;
for(var i=0; i<persons.length; i++) {
var cur_person = persons[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);
}
}
}
function 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 persons = jsonObj.teacher;
for(var i=0; i<persons.length; 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();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery ui</title>
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
</head>
// Author By Eric Liang
<body>
<form>
<table border="1" id="personform">
<tr>
<td>id</id>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>Delete Action</td>
<td>Update Action</td>
</tr>
</table>
</form>
id: <input type="text" id="userid" />
name: <input type="text" id="username"/>
sex: <input type="text" id="sex"/>
age: <input type="text" id="age"/>
<input type="button" value="add" onclick="addperson()"/>
</br>
id: <input type="text" id="update_userid" disabled="disabled" />
name: <input type="text" id="update_username"/>
sex: <input type="text" id="update_sex"/>
age: <input type="text" id="update_age" />
<input type="button" value="update" onclick="update()"/>
</body>
</html>
<script>
</script>
<script type="text/javascript">
var jsonObj = { teacher: [
{ id:'1', name: "Eric", sex: "m", age: "40" },
{ id:'2', name: "Ghost", sex: "m", age: "28" },
{ id:'3', name: "Didi", sex: "m", age: "27" }
]};
refresh();
function refresh() {
var persons = jsonObj.teacher;
$("tr[name='person']").remove();
for(var i=0; i<persons.length; i++) {
var cur_person = persons[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 = "<td>"+ cur_id +"</td>";
var nameTd = "<td>"+ cur_name +"</td>";
var sexTd = "<td>"+ cur_sex +"</td>";
var ageTd = "<td>"+ cur_age +"</td>";
var deleteAction = "<td><a href='#' onclick='deleteperson(this)' name='";
deleteAction += cur_id +"'" +"</a>删除</td>"
var updateAction = "<td><a href='#' onclick='updateperson(this)' name='";
updateAction += cur_id +"'" +"</a>更新</td>"
//alert(deleteAction);
var trStr = "<tr name='person'>" + idTd;
trStr += nameTd;
trStr += sexTd;
trStr += ageTd;
trStr += deleteAction;
trStr += updateAction;
//alert(trStr);
$('#personform').append(trStr);
}
}
function checkPersonExist(targetId) {
var persons = jsonObj.teacher;
for(var i=0; i<persons.length; i++) {
var cur_person = persons[i];
if(cur_person.id == targetId) {
alert("添加失败! Id"+ targetId + "已经存在!");
return false;
}
}
return true;
}
function addperson() {
var userid = $('#userid').val();
var flag = checkPersonExist(userid);
if(flag == false) {
return false;
}
var username = $('#username').val();
var sex = $('#sex').val();
var age = $('#age').val();
var newPerson = "{id:" + "'"+userid+"'" +","+ "name:"+ "'"+username+"'"+","+ "sex:"+"'"+sex + "'"+"," + "age:"+"'"+age+"'" +"}";
newPerson = eval("(" + newPerson + ")");
//$('#personform').append(trStr);
jsonObj.teacher.push(newPerson);
refresh();
}
function deleteperson(obj) {
//alert(obj.name);
var delId = obj.name;
var persons = jsonObj.teacher;
for(var i=0; i<persons.length; i++) {
var cur_person = persons[i];
if(cur_person.id == delId) {
persons.splice(i,1);
}
}
refresh();
}
function updateperson(targetId) {
var updateId = targetId.name;
var persons = jsonObj.teacher;
for(var i=0; i<persons.length; i++) {
var cur_person = persons[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);
}
}
}
function 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 persons = jsonObj.teacher;
for(var i=0; i<persons.length; 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();
}
</script>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
在使用EasyUI的时候，我们经常回遇到在二级页面进行勾选的时候，这里给大家分享一个比较简单实用的实现方法，希望大家能够喜欢。2015-03-03
本文使用jquery代码实现万圣节特效，代码简单易懂，万圣节送给大家不一样的礼物，参考下本文大家也一起制作吧2015-11-11
有时候我们需要判断当前的图片是否存在，方便后期做一些操作，当然也可以参考上一篇文章，如果不存在就替换位默认图片2023-06-06
正如标题所言的实现原理是使div的position为绝对定位absolute，然后控制其top与left值,需要的朋友可以参考下2014-04-04
本文给大家介绍bootstrap无限级分类jq拓展之前的无限级分类的封装版的知识，非常不错具有参考借鉴价值，感兴趣的朋友一起看下吧2016-08-08
这篇文章主要为大家详细介绍了jQuery validate验证插件用法，Validate是基于jQuery的一款轻量级验证插件，支持input,select,textarea的验证，感兴趣的小伙伴们可以参考一下2016-05-05
本文主要介绍jquery仿ps颜色拾取功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
下面小编就为大家带来一篇Jquery跨域获得Json的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
有个同事问我each使用方法,我把我知道的用法告诉他.他却说不是这样的.如是在网上小逛了一下,果然用法有很多.下面总结下大慨的使用方法.2010-12-12
在实际的应用中可能会出现表格中带复选框的，删除时，将复选框所在的行的记录删除。在这的地方，可以加个特效，单击某行的同时将该行的复选框选中，该行的背景色也高亮显示2013-08-08
最新评论