jquery实现的表格数据增删改查

html文件：

	<  id=\"bootstrap_221\" rel=\"stylesheet\" type=\"text/css\" class=\"library\" href=\"/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css\">
	<  id=\"jquery_172\" type=\"text/ \" class=\"library\" src=\"/js/sandbox/jquery/jquery-1.7.2.min.js\"></ >
	<  id=\"bootstrap_221\" type=\"text/ \" class=\"library\" src=\"/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js\"></ >
<button type=\"button\" class=\"btn btn-primary\" 
   data-toggle=\"button\">增加</button>
<table class=\"table table-bordered\">
   <caption>边框表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
		 <th>操作</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
		  <td> 
		  <a href=\" :;\" class=\"btn btn-info edit btn-lg\"><span class=\"icon-edit\"></span>修改 </a>
		  </td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
		 <td>
		  <a href=\" :;\" class=\"btn btn-info edit btn-lg\"><span class=\"icon-edit\"></span>修改</a>
		 </td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
		 <td>
		  <a href=\" :;\" class=\"btn  btn-info edit btn-lg\"><span class=\"icon-edit\"></span>修改</a>
		 </td>
      </tr>
   </tbody>
</table>

js文件：

//增加
  $(\".btn-primary\").click(function(){
    if($(\"table tr\").hasClass(\"addtr\")){
	alert(\"先完成操作！！！\");
	}else{
     $(\"table tr:last\").after(\' <tr class=\"addtr\"><td><input type=\"text\" name=\"names\" value=\"\" /></td>\'+\' <td><input type=\"text\" name=\"sexs\" value=\"\" /></td>\'+\'<td><input type=\"text\" name=\"ages\" value=\"\" /></td>\' +\'<td> <a href=\" :;\" class=\"btn save btn-info btn-lg\">保存</a>  <a href=\" :;\" class=\"btn off btn-info btn-lg\">取消</a> </td>\'+\' </tr>\');
       } 
		 
    
  })
 
  
  
  
  //保存
  $(document).on(\"click\",\".save\",function(){
  
   var name =$(this).parent().parent().find(\'input[name=\"names\"]\').val();
   var sex =$(\'input[name=\"sexs\"]\').val();
   var age =$(\'input[name=\"ages\"]\').val();

      var n=\"\";
      n+=\'<td>\'+name+\'</td>\';
        n+=\' <td>\'+sex+\'</td>\';
       n+=\'  <td>\'+age+\'</td>\';
		n+=\' <td>\';
		n+=\'  <a href=\" :;\" class=\"btn edit btn-info btn-lg\"><span class=\"icon-edit\"></span>修改</a>\';
		n+=\' </td>\';
       $(this).parent().parent().removeClass(\"addtr\");
      $(this).parent().parent().html(n);
  })
  
   //修改
  $(document).on(\"click\",\".edit\",function(){
  if($(\"table tr\").hasClass(\"addtr\")){
	alert(\"先完成操作！！！\");
	}else{
   var name =$(this).parent().parent().find(\'td\').eq(0).text();
   var sex =$(this).parent().parent().find(\'td\').eq(1).text();
   var age =$(this).parent().parent().find(\'td\').eq(2).text();
   
    var n=\"\";
      n+=\'<td><input type=\"text\" name=\"names\" value=\"\'+name+\'\" /></td>\';
        n+=\' <td><input type=\"text\" name=\"sexs\" value=\"\'+sex+\'\" /></td>\';
       n+=\'  <td><input type=\"text\" name=\"ages\" value=\"\'+age+\'\" /></td>\';
		n+=\' <td>\';
		n+=\'  <a href=\" :;\" class=\"btn save btn-info btn-lg\">保存</a>\';
		n+=\'  <a href=\" :;\" class=\"btn off btn-info btn-lg\">取消</a>\';
		n+=\' </td>\';
       $(this).parent().parent().addClass(\"addtr\");
      $(this).parent().parent().html(n);
	  }
   
  })
  
  $(document).on(\"click\",\".off\",function(){
  
   window.location.reload();
  })

效果图：