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

  时间:2017-03-27
本文章向大家介绍jquery实现对表格数据的添加修改和删除,需要的朋友可以参考一下。

html文件:

	<link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">
	<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
	<script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>
<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="javascript:;" 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="javascript:;" 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="javascript:;" 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="javascript:;" class="btn save btn-info btn-lg">保存</a>  <a href="javascript:;" 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="javascript:;" 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="javascript:;" class="btn save btn-info btn-lg">保存</a>';
		n+='  <a href="javascript:;" 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();
  })

 

效果图:

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

原文地址:http://www.manongjc.com/article/1828.html