JQuery实现动态表格(添加、删除、遍历)

最新推荐文章于 2022-05-15 19:31:22 发布

你好啊cbw

最新推荐文章于 2022-05-15 19:31:22 发布

阅读量1.3w

点赞数 14

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_40454863/article/details/114447090

版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用JavaScript和jQuery操作HTML表格，包括遍历表格内容，动态添加记录以及删除记录的逻辑。遍历表格时，通过获取tbody内的tr元素并遍历其td内容；添加记录时，向tbody末尾追加新的tr；删除记录时，利用事件委托处理动态添加的按钮，删除触发事件的行。

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

遍历表格逻辑

1.浏览器会自动把所有行tr使用tbody标签包裹起来

2.使用childern()获取当前元素的所有儿子标签

3.table表格需要两个childern才能获取到所有tr行，若一个childern只能获取到tbody，即$("#myTable").childern().childern()

4.遍历每行，每行元素trObject调用childern()获取每行的所有单元格(列)集合，时刻将js对象转成jq对象。

5.遍历每个单元格，使用Htm()获取每个单元格内容存入字符串变量str中

添加表格一条记录逻辑

1.给添加按钮绑定点击事件

2.点击按钮后，获取table元素的tbody元素，给table表格的tbody中append内部末尾追加一个行元素

3.注意，由于表格自动生成tbody，不能直接获取table表格append一个tr,这样也能追加，但追加的tr在tbody外。

删除表格一条记录逻辑

1.此种绑定事件的方式对动态添加的元素不生效

即通过元素.click(function(){})绑定事件方式是无法绑定动态生成的任何元素的，因为这种方式是在页面加载完成后就当前页面所选中的元素进行绑定，后续动态添加且符合被选中的元素是不会被绑定，这就需要使用另一种事件绑定方式$(document).on(事件名称,要选中的元素，匿名函数)即整个文档准备完毕后再进行绑定事件。

2.使用下面这种绑定事件方式进行记录的删除，this表示当前触发的按钮

3.点击删除按钮，触发绑定的事件，获取当前元素的父级td的父级tr元素，即删除该按钮所在的行

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态表格</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style>
			td,
			th {
				padding: 10px;
			}
		</style>
		<script>
			$(function() {
				/*给遍历表格按钮绑定点击事件*/
				$("#blBtn").click(function() {
						var tab = $("#myTable"); //获取到了表格的jQuery对象
						//获取表格的所有行 
						//tab.children()获取的是表格tbody，
						//表格默认把所有tr行用tbody包裹，使用两次childer即可
						var trArr=tab.children().children(); 
						//遍历行
						for(var i=0;i<trArr.length;i++){ 
							var trObj=$(trArr[i]); /*使用$包裹，将js对象转出jq对象*/
							//获取每行的单元格的集合
							var tdArr=$(trObj.children()); /*同样要转成jq对象*/
							//遍历每个单元格 
							var str=""; 
							for(var j=0;j<tdArr.length;j++){ 
								var tdObj=$(tdArr[j]); /*列集合中每一个js对象转出jq*/
								var html=tdObj.html();/*获取单元格内所有内容包括标签*/
								//获取每个单元格中的内容
								str += html+"--";
							}
							console.log(str);
						}
				});
				/*给添加按钮绑定点击事件
				  获取table，给table表格append追加一个行元素
				 * */
				$("#addBtn").click(function() {
					var tab = $("#myTable>tbody"); //获取到了表格中tbody元素的jQuery对象 
					
					var num = parseInt(Math.random() * 10) + 1;/*产生随机数*/
					var tr = ' <tr > '+ 
						 			'<td >' +num+'</td>'+ 
						 			'<td >小熊饼干 '+num+' </td>'+ 
									'<td >￥125</td>'+  
						 			'<td >1</td>'+
						 			'<td ><button name ="delBtn" >删除 </button></td > '+ 
							' </tr>';
					tab.append(tr); /*向表格内部末尾追加一个行元素使用append*/
				});
			
				//此种绑定事件的方式对动态添加的元素不生效
				/*$("button[name='delBtn']").click(function(){ 
				 * 	alert("aaaa"); 
				 *});*/ 
			 
				 $(document).on("click", "button[name='delBtn']", function() {
						$(this).parent().parent().remove();
				});
		});</script>
	</head>

	<body>
		<button type="button" id="blBtn">遍历表格</button> 
		<button type="button" id="addBtn">添加</button>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;">
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td><button name="delBtn">删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td><button name="delBtn">删除</button></td>
			</tr>

		</table>
	</body>

</html>