JQuery动态增删表格行

snailanger

于 2014-03-20 01:44:25 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/snailanger/article/details/21573407

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

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

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

<!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>