JQurey在表格中动态增加、删除指定行

最新推荐文章于 2022-01-26 09:43:35 发布

xgysimida

最新推荐文章于 2022-01-26 09:43:35 发布

阅读量471

点赞数 1

本文链接：https://blog.csdn.net/xgysimida/article/details/86492319

版权

最近在做项目的时候需用JQuery动态的增加或者删除指定的行，废话不多说，直接看下图，

1.原始的界面

2.增加指定行后的界面

3.删除指定行后的界面

要实现的功能比较简单，还是希望对新手们有帮助吧，代码如下：

<script src="js/jquery.min.js"></script>
<script type="application/javascript">
   function btnadd(obj){
      var html='<tr><td>经度<input type="text" id="jingdu" /></td><td>纬度<input type="text" id="weidu" /></td><td><a onclick="btnadd(this)">+</a></td><td><a onclick="btndel(this)">-</a></td> </tr>';
				
      $(obj).parents("tr").after(html);
   }
   function btndel(obj){
      var res = confirm('确认要删除吗？');
      if(res==true){
	  $(obj).parents("tr").remove();
		 }		
			}
			
 </script>
 <style type="text/css">
      a{
	cursor: pointer;
	}
 </style>
<body>
      <table id="tab">
	   <caption>动态增加、删除指定行</caption>
	   <tr>
	       <td>经度<input type="text" id="jingdu"/></td>
	       <td>纬度<input type="text" id="weidu" /></td>
	       <td><a onclick="btnadd(this)">+</a></td>
	       <td><a onclick="btndel(this)">-</a></td>
	   </tr>	
      </table>
</body>

xgysimida

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQurey在表格中动态增加、删除指定行

最近在做项目的时候需用JQuery动态的增加或者删除指定的行，废话不多说，直接看下图，1.原始的界面2.增加指定行后的界面3.删除指定行后的界面要实现的功能比较简单，还是希望对新手们有帮助吧，代码如下：&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;&lt;script type="application/...
复制链接

扫一扫