如何用JavaScript将HTML表格转换为单列纵向表格

需求说明 #

需要将普通表格按列拆分，把原表格的每列内容依次组合成纵向单列表格，最终效果如下：

Column 1
Data 1
Data 4
Data 7
Column 2
Data 2
Data 5
Data 8
Column 3
Data 3
Data 6
Data 9

当前代码实现的是按行拆分的效果，需要修改逻辑实现按列遍历。

修改后的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Transform Table</title>
    <style>
        table, th, td {
          border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function () {
            transformTable();
        };

        function transformTable() {
            var originalTable = document.getElementById("originalTable");
            var transformedTable = document.getElementById("transformedTable");
            
            // 获取表格的列数（取第一行的单元格数量）
            var columnCount = originalTable.rows[0].cells.length;
            
            // 先遍历每一列
            for (var col = 0; col < columnCount; col++) {
                // 再遍历每一行，取出当前列的单元格
                for (var row = 0; row < originalTable.rows.length; row++) {
                    var cell = originalTable.rows[row].cells[col];
                    var newRow = transformedTable.insertRow();
                    var newCell = newRow.insertCell();
                    
                    // 复制原单元格的属性
                    for (var k = 0; k < cell.attributes.length; k++) {
                        var attr = cell.attributes[k];
                        newCell.setAttribute(attr.name, attr.value);
                    }
                    
                    // 复制原单元格的内容
                    var cellContents = cell.cloneNode(true);
                    while (cellContents.firstChild) {
                        newCell.appendChild(cellContents.removeChild(cellContents.firstChild));
                    }
                }
            }
        }
    </script>
</head>
<body>
    <!-- Original table visible on normal view -->
    <table id="originalTable">
        <tr>
            <td class="original-cell"><div class="cell-content">Column 1</div></td>
            <td class="original-cell"><div class="cell-content">Column 2</div></td>
            <td><div class="cell-content">Column 3</div></td>
        </tr>
        <tr>
            <td><div class="cell-content">Data 1</div></td>
            <td><div class="cell-content">Data 2</div></td>
            <td><div class="cell-content">Data 3</div></td>
        </tr>
        <tr>
            <td><div class="cell-content">Data 4</div></td>
            <td><div class="cell-content">Data 5</div></td>
            <td><div class="cell-content">Data 6</div></td>
        </tr>
        <tr>
            <td><div class="cell-content">Data 7</div></td>
            <td><div class="cell-content">Data 8</div></td>
            <td><div class="cell-content">Data 9</div></td>
        </tr>
        <!-- Add more rows as needed -->
    </table>
    <!-- Transformed table visible on mobile view -->
    <table id="transformedTable" style="border: 2px solid black">
    </table>
</body>
</html>

关键修改点 #

• 原代码是先遍历行再遍历列，现在改为先遍历列，再遍历行：先获取表格的总列数，然后对每一列，依次取出该列下所有行的单元格，添加到新表格中。
• 这样就能保证同一列的内容连续排列，实现你需要的纵向布局。

内容的提问来源于stack exchange，提问作者Marius Iordan