jQuery对表格进行新增行，删除行操作

最新推荐文章于 2022-03-26 18:28:19 发布

tianmaster

最新推荐文章于 2022-03-26 18:28:19 发布

阅读量393

点赞数

分类专栏：基础知识

本文链接：https://blog.youkuaiyun.com/qq_44126024/article/details/113933230

版权

jquery html

基础知识专栏收录该内容

28 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">	
			var i = 1
			/* 增加 */
			function add(){
				i++
				if(i <= 5){
					$("tbody:last").append(
					"<tr> <td>"+ i +"</td> <td><input type='text'/></td> <td><input type='text'/></td> <td><input type='text'/></td> <td><input type='button' value='删除' οnclick='del(this)'></td> </tr>"
					)
				}
			}
			
			/* 删除 */
			function del(e){
				// 拿到tr删除
				$(e).parent().parent().remove()
				i--
			}
		</script>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="5px">
			<thead>
				<tr>
					<th>序列</th>
					<th>姓名</th>
					<th>电话</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td><input type="text"/></td>
					<td><input type="text"/></td>
					<td><input type="text"/></td>
					<td>...</td>
				</tr>
			</tbody>
		</table>
		<input type="button" id="add" value="新增" onclick="add()"/>
	</body>
</html>