jq读取合并行后边的指定列数据_jquery拖动合并列-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37525899/article/details/90383608

这篇博客介绍了如何利用jq处理含有合并行的table，特别是读取指定列，例如FFF列的数据。博主通过示例代码展示了如何进行判断并最终将数据放入数组，分享了这一经典技巧。

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

觉得很有意思的一个分享，说是读取table的指定列数据，如图
在这里插入图片描述
我想要读出FFF列的数据，使用jq，因为前边有个合并行，因此就得一个加一个判断，码上见吧：

<!DOCTYPE html>
<html>
<head>
<!-- jq在线cdn -->
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">


	</style>
</head>
<body>

<table border="1" id="this_table">
	<thead>
		<tr>
			<th>AAA</th>
			<th>BBB</th>
			<th>CCC</th>
			<th>DDD</th>
			<th>EEE</th>
			<th>FFF</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="6">111</td>
			<td rowspan="6">222</td>
			<td>333</td>
			<td>444</td>
			<td>555</td>
			<td>666</td>
		</tr>
		<tr>
			<td>777</td>
			<td>888</td>
			<td>999</td>
			<td>000</td>
		</tr>
		<tr>
			<td>aaa</td>
			<td>bbb</td>
			<td>ccc</td>
			<td>ddd</td>
		</tr>
		<tr>
			<td>eee</td>
			<td>fff</td>
			<td>ggg</td>
			<td>hhh</td>
		</tr>
		<tr>
			<td>iii</td>
			<td>jjj</td>
			<td>kkk</td>
			<td>lll</td>
		</tr>
		<tr>
			<td>mmm</td>
			<td>nnn</td>
			<td>ooo</td>
			<td>ppp</td>
		</tr>
	</tbody>
</table>
<script>
// 定义一个数组
var my_data_arr = [];
// dom加载完成执行
$(function(){
	// 遍历所有行，我们可以看到，有7行，那么循环执行7次
	$("#this_table tr").each(function(index,obj){
		// obj是当前对象，也就是this，index是当前循环下标
		if(index==1){
			// 等于1的时候，正好读取到合并的那一行，因此提取第5位
			my_data_arr[index-1] = $(this).find("td").eq(5).html();
			console.log($(this).find("td").eq(5).html());
			$(this).find("td").eq(5).css("background","red");
		}else if(index>1){
			// 大于1的时候，则提取第三位
			my_data_arr[index-1] = $(this).find("td").eq(3).html();
			console.log($(this).find("td").eq(3).html());
			$(this).find("td").eq(3).css("background","blue");
		}

	});
	console.log(my_data_arr);
})
</script>

</body>
</html>

最后放到一个数组，就像这样
在这里插入图片描述
觉得蛮经典的，遂分享一下~