jQuery实现表格的动态删除或添加

最新推荐文章于 2024-07-03 02:58:57 发布

Gardenia Minwentel

最新推荐文章于 2024-07-03 02:58:57 发布

阅读量669

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_43090158/article/details/96738511

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery实现表格的动态删除或添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rows</title>
		<script src="js/jquery-3.3.1.min.js"></script>
		<style>
			table tr td{
				border:1px solid;
				height: 10px;
				width:48%;
				background-color: skyblue;
				text-align: center;
			}
			
		</style>
		<script>
			
			function ajax(){
				return true;
			}
			
			function addTr(){
				var text1 = document.getElementById("text1").value;
				var text2 = document.getElementById("text2").value;
				var new_tr=$("<tr><td>"+text1+"</td><td>"+text2+"</td><td><button onclick='del(this)'>删除</button></td></tr>");
				$("#tb1").append(new_tr);//将添加table里面的最后面，而使用after会添加到table外面的后面，就不会接在table的最后一行后面
			}
			function del(obj){
					var $tr = $(obj).parent().parent();//获取到tr
					var td = $tr.find("td").eq(0).text();// 找tr中第一个td中的文本值
					var flag = ajax();
					if(flag){
						$tr.remove();
					}
			}
			
		</script>
	</head>
	<body>
		<table  id="tb1" align="center">
			<tr>
				<td>编号</td>
				<td>名字</td>
				<td >操作</td>
			</tr>
			<tr>
				<td>1</td>
				<td>Tony</td>
				<td><button onclick="del(this)">删除</button></td>
				
			</tr>
			<tr>
				<td>2</td>
				<td>Tom</td>
				<td><button onclick="del(this)">删除</button></td>
				
			</tr>
		</table>
		<hr />
		
			
			内容：<input type="text" id="text1"/>
			类别：<input type="text" id="text2"/>
			<button onclick="addTr()">添加</button>
			
		
	</body>
</html>

效果图
在没有做添加和删除操作之前的页面：

在这里插入图片描述
在文本框中填入相关信息后，点击添加按钮：

点击右边的删除按钮，可以将该行从表格中删除：