Jquery 实现表格动态增加一行，删除一行

最新推荐文章于 2018-08-23 13:08:47 发布

转载最新推荐文章于 2018-08-23 13:08:47 发布 · 410 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fydora/p/6806833.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现表格动态增加与删除的方法，并保留了标题行和第一行的内容不变。通过简单的代码示例展示了如何克隆表格行并更新序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天jq插件，没找到合适的，所以自己写了个demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
	table.table input{ /*可输入区域样式*/ 
width:100%; 
height: 100%;
 

border:none; /* 输入框不要边框 */ 
font-family:Arial; 
} 
</style>
</head>
<body>
<br>

<table class="table" border="1">
	<thead>
	<tr>
		<th>检项</th>
		<th>厚度</th>
		<th>光度</th>
		<th>外观</th>
	</tr>
	</thead>
	<tbody>
	<tr id="a">
		
		<td class="td"></td>
		<td><input type="" name=""></td>
		<td><input type="" name=""></td>
		<td><input type="" name=""></td>
		
	</tr>
	<tr>
		
		<td class="td"></td>
		<td><input type="" name=""></td>
		<td><input type="" name=""></td>
		<td><input type="" name=""></td>
		 
	</tr>
		
	</tbody>
	
</table>

<button onclick="fun()">增加一行</button>
<button onclick="del()">删除一行</button>

<script type="text/javascript">                   //前面的序号1,2,3......
	var i = 1;
	$(".td").each(function(){
		$(this).html(i++);
	})


	function fun(){
		var $td = $("#a").clone();       //增加一行,克隆第一个对象
		$(".table").append($td);
		var i = 1;
		$(".td").each(function(){       //增加一行后重新更新序号1,2,3......
		$(this).html(i++);
		})
		$("table tr:last").find(":input").val('');   //将尾行元素克隆来的保存的值清空
	}

	function del(){
		$("table tr:not(:first):not(:first):last").remove();      //移除最后一行,并且保留前两行
	}
</script>
 </body>	
</html>

转载于:https://www.cnblogs.com/fydora/p/6806833.html