jQuery操作表格删除添加行，并且获取每个都有表示不重复。

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量173

点赞数

文章标签： jquery html html5

本文链接：https://blog.csdn.net/weixin_44424114/article/details/103568807

版权

单独写出一个网页。可以直接下载打开看

欢迎查看zqps的博客

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<!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>
</head>
<body>
<table style="width: 98%; height: 100%">
	<tbody>
		<tr height="50px"  id="clo1" class="trflag">
			<td style="width: 120px;" align="right">榜单奖励：第 </td>
			<td>
			<span style="width: 100px;"><input  type="number"></input>名</span>
			<span style="width: 50px;">——</span>
			<span style="width: 100px;">第<input  type="number"></input>名</span>
			</td>
			<td style="width: 120px;" align="right">奖励<span style="color: red">*</span>：</td>
			<td  style="width: 250px;"><input  type="text"></input></td>
			<td><button type="button" onclick="del(this)" style="background: pink">删除</button></td>
		</tr>											
         <tr>
         		<td style="width: 120px;"></td>
			<td><button type="button" onclick="add()" style="background: CornflowerBlue">新增</button></td>
		</tr>
	</tbody>
</table>
	<script type="text/javascript">
	function add() {
			//添加一行
	        var tr = $("#clo1").clone();       //增加一行,克隆第一个对象
	        tr='<tr height="50px"  id="clo1"  class="trflag">'+tr.html().replace("榜单奖励：","")+'</tr>';
	        $("tr:eq(-1)").before(tr);
	    	 var i = 1;
	        $(".trflag").each(function(){       //增加一行后重新更新序号1,2,3......
		        $(this).attr("id","clo"+i);
		        /* console.log($(this).find("button").html()); */
		        $(this).find("button").attr("id","del"+i); 
		        i++;
	        }) 
	        $("tr:eq(-2)").find("input").val('');   //将尾行元素克隆来的保存的值清空
		 };
	
	function del(obj) {
		var flag = $(obj).parent().parent().attr("id");
		if("clo1"!= flag){
			$(obj).parent().parent().remove();
			 var i = 1;
			 $(".trflag").each(function(){       //增加一行后重新更新序号1,2,3......
			        $(this).attr("id","clo"+i);
			        /* console.log($(this).find("button").html()); */
			        /* $(this).find("button").attr("id","del"+i);  */
			        i++;
		        }) 
		}else{
			alert("第一个不可以删除！");
		}
	}
	</script>
</body>
</html>