JQuery动态增删表格行

最新推荐文章于 2025-09-10 12:00:08 发布

原创最新推荐文章于 2025-09-10 12:00:08 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种利用jQuery实现网页中表格行的动态添加和删除的方法。通过两个按钮控制表格行的增删，适用于需要用户动态输入多条记录的场景。文中提供了完整的HTML页面代码及JavaScript函数。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>new_file1</title>
        <script type="text/jscript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
        	function delTr(obj){ //删除行
        		$(obj).parent().parent().remove();
        	}
        	function addTr(){  //增加行
        		$("#tab tr:last").after('<tr><td>名称</td><td><input type="button" onclick="delTr(this)" value="删除"/></td></tr>')
        	}
        </script>
	</head>

	<body>
		<input type="button" onclick="addTr()" value="添加"/>
		<table border="1px #ooo" id="tab" cellpadding="0" cellspacing="0" width="30%">
			<tr>
				<td>名称</td>
				<td>操作</td>
			</tr>
		</table>
	</body>
</html>