Jquery动态给表格添加、删除行

最新推荐文章于 2024-08-08 16:36:35 发布

置顶 u011955534

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量1.6w

点赞数 2

分类专栏：笔记文章标签： jquery javascript 动态增加行

本文链接：https://blog.csdn.net/u011955534/article/details/16809023

版权

笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

HTML代码

 <body>
  <input type="button" value="ADD" id="btn1"/>
  <input type="button" value="DEL" id="btn2"/>
  <div id="div1">
  	<table border="1" width="200px" id="t1">
  		<tr class="CaseRow">
  			<td>test1</td>
  			<td><input type="checkbox" /></td>
  		</tr>
  		<tr class="CaseRow">
  			<td>test2</td>
  			<td><input type="checkbox" /></td>
  		</tr>
  	</table>
  </div>
  </body>

JS代码

<script type="text/javascript">
	$(document).ready(function(){
		$("#btn1").click(function(){
			var tr = "<tr class='CaseRow'><td>new</td><td><input type='checkbox' /></td></tr>";
			$("table").append(tr);//向table中追加tr
		});
		$("#btn2").click(function(){
			var num=$("#t1 tr").filter(".CaseRow").size();//获得表格行数
			alert(num);
			if(num==1){
				alert("留一行，好不好");
				return;
			}
			var t=$("input:checked").parent().parent("tr").remove();//移除选中的行
		});
	});
</script>