记录：用 javascript 转置表格

jessezappy

于 2025-07-04 19:59:22 发布

阅读量176

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js Html 日记文章标签： javascript Html 表格转置

本文链接：https://blog.csdn.net/jessezappy/article/details/149124011

日记同时被 3 个专栏收录

46 篇文章

订阅专栏

Html

37 篇文章

订阅专栏

5 篇文章

订阅专栏

生成的表格横向内容太多，不利于观看，又懒得改生成代码，就想到用 JS 函数来直接将其行列转置，便于浏览：

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="force-rendering" content="webkit">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	<title></title>
	<style type="text/css"> 
		*{margin: 0; padding: 0;}
		html,body{
			width:100%;
			height:100%;
			line-height: 1;
			text-align: center;
		}
		
	</style>
	<script src="/plugin/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
 <button id='abtn' >转置</button> 
<table id='tb1' border="1" width="50%" id="table1">
	<caption><b>表格A</b></caption>
	<thead><tr>
		<th>时间区间</th>
		<th>B</th>
		<th>C</th>
		<th>D</th>
		<th>E</th>
	</tr></thead>
	<tbody>
	<tr>
		<td>S1</td>
		<td>B1</td>
		<td>C1</td>
		<td>D1</td>
		<td>E1</td>
	</tr>
	<tr>
		<td>S12</td>
		<td>B2</td>
		<td>C2</td>
		<td>D2</td>
		<td>E2</td>
	</tr></tbody>
</table>
</body></html>
<script type="text/javascript">
	function rTB(id){
		// 获取表格元素
		const table = document.getElementById(id);
		
		const caption = table.caption;
		
		// 获取行列数
		const rows = table.rows.length;
		const cols = table.rows[0].cells.length;

		// 创建转置数据数组
		const transposedData = [];

		// 执行转置操作
		for (let i = 0; i < cols; i++) {
		  transposedData[i] = [];
		  for (let j = 0; j < rows; j++) {
			transposedData[i][j] = table.rows[j].cells[i].innerHTML;
		  }
		}

		// 清空原表格
		table.innerHTML = "";

		// 重新渲染转置后的表格
		for (let i = 0; i < transposedData.length; i++) {
		  const row = table.insertRow(i);
		  for (let j = 0; j < transposedData[i].length; j++) {
			const cell = row.insertCell(j);
			cell.innerHTML = transposedData[i][j];
		  }
		}
		table.caption=caption;//保留原标题
	}
	$(function() {
		$('#abtn').click(function(e){
			rTB('tb1');
		});
	});
</script>

效果预览：