jQuery操作JSON的CRUD用法实例

前端技术 2023/09/02 JavaScript

本文实例讲述了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>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/5022

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案