利用jquery给指定的table动态添加行、删除行

最新推荐文章于 2022-06-09 16:14:33 发布

gorch

最新推荐文章于 2022-06-09 16:14:33 发布

阅读量905

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript代码

本文链接：https://blog.csdn.net/gorch/article/details/48574761

Javascript代码专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用jQuery在指定的表格中添加和删除行，并提供全选功能。通过封装方法简化操作流程，适用于需要动态更新表格内容的应用场景。

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

<html>
	<head>
		<title>利用jquery给指定的table添加行、删除行</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			////////添加一行、删除一行封装方法///////
			/**
			* 为table指定行添加一行
			* tab 表id
			* row 行数，如：0->第一行 1->第二行
			* trHtml 添加行的html代码
			*/
			function addTr(tab, row, trHtml){
				//获取table最后一行 $("#tab tr:last")
				//获取table第一行 $("#tab tr").eq(0)
				var $tr=$("#"+tab+" tr").eq(0);
				//var $tr=$("#"+tab+" tr:last");
				if($tr.size()==0){
					alert("指定的table id或行数不存在！");
					return;
				}
				$tr.after(trHtml);
			}

			function delTr(ckb){
				//获取选中的复选框，然后循环遍历删除
				var ckbs=$("input[name="+ckb+"]:checked");
				if(ckbs.size()==0){
					alert("要删除指定行，需选中要删除的行！");
					return;
				}
				ckbs.each(function(){
					$(this).parent().parent().remove();
				});
			}

			/**
			* 全选
			* 
			* allCkb 全选复选框的id
			* items 复选框的name
			*/
			function allCheck(allCkb, items){
				$("#"+allCkb).click(function(){
					$('[name='+items+']:checkbox').attr("checked", this.checked );
				});
			}

			////////添加一行、删除一行测试方法///////
			$(function(){
				//全选
				allCheck("allCkb", "ckb");
			});

			function addTr2(tab, row){
				var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/></td><td width='30%'>"+$("#subject").val()+"</td><td width='30%'>"+$("#mark").val()+"</td></tr>";
				addTr(tab, row, trHtml);
			}

			function delTr2(){
				delTr('ckb');
			}
		</script>
	</head>

<body>
	<table border="1px #ooo" id="tab" cellpadding="0" cellspacing="0" width="500px">
		<tr align="center">
			<td width="30%"><input id="allCkb" type="checkbox"/></td>
			<td width="30%">科目</td>
			<td width="30%">成绩</td>
		</tr>
		<tr align="center">
			<td width="30%"><input type='checkbox' name='ckb'/></td>
			<td width="30%">语文</td>
			<td width="30%">80</td> 
		</tr>
	</table>
	<br><br>科目：<input type="text" id="subject" name="subject" />成绩：<input type="text" name="mark" id="mark"/>
	<input type="button" onclick="addTr2('tab', 0)" value="添加">
	<input type="button" onclick="delTr2()" value="删除">
</body>
</html>