用jQuery实现表格的添加和删除

最新推荐文章于 2023-05-29 09:49:05 发布

December_shi

最新推荐文章于 2023-05-29 09:49:05 发布

阅读量1.4k

点赞数 1

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/December_shi/article/details/109564586

版权

JQuery 专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了如何利用jQuery实现表格的动态操作。通过点击添加按钮，可以在表格下方新增一行；点击GET按钮则能删除当前选中行。内容涵盖CSS、HTML和JavaScript代码示例。

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

用jQuery实现点击添加能够在表格下面添加一行选项，点击GET能够删除当前行。

在这里插入图片描述

CSS代码：

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				margin: 0 auto;
				width: 300px;
			}
			table{
				text-align: center;
				width: 300px;
			}
			#btn{
				width: 100px;
				color: #000;
				font-weight: 900;
				font-size: 18px;
			}
			thead{
				background-color: #0099cc;
				color: #fff;
			}
			tbody{
				background-color: #F0F0F0;
			}
		</style>

html代码：

<div id="">
			<input type="button" name="" id="btn" value="添加数据" />
			<table border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th>课程名称</th>
						<th>所属专业</th>
						<th>已学会</th>
					</tr>
				</thead>
				
				<tbody>
					<tr>
						<td>JavaScript</td>
						<td>PHP&前端方向</td>
						<td><a href="#">GET</a></td>
					</tr>
					<tr>
						<td>CSS</td>
						<td>PHP&前端方向</td>
						<td><a href="#">GET</a></td>
					</tr>
					<tr>
						<td>html</td>
						<td>PHP&前端方向</td>
						<td><a href="#">GET</a></td>
					</tr>
					<tr id="box">
						<td>photoshop</td>
						<td>UED方向</td>
						<td><a href="#">GET</a></td>
					</tr>
				</tbody>
			</table>
		</div>

js代码：

			<script src="jquery.min.js"></script>
			<script type="text/javascript">
					// 页面加载后就可以删除自带的内容
					$("a").click(function(){
						$(this).parent().parent().remove();
					})	
					// 添加和删除
					$("#btn").click(function(){
						var $txt1=prompt("请输入内容1");
						var $txt2=prompt("请输入内容2");
						// var $txt3=prompt("请输入内容3");
						
						$("tbody").append("<tr>"+
											"<td>"+$txt1+"</td>"+
											"<td>"+$txt2+"</td>"+
											// "<td>"+$txt3+"</td>"+
											"<td><a href=#>GET</a></td>"+
											
										"</tr>")
										
										
						// 删除				
						$("a").click(function(){
							$(this).parent().parent().remove();
						})					
					})				
			</script>