：js如何自由調整table列的順序

<table id="myTable">

    <tr>

        <th>姓名</th>

        <th>年齡</th>

        <th>城市</th>

    </tr>

    <tr>

        <td>張三</td>

        <td>28</td>

        <td>北京</td>

    </tr>

    <!-- 其他行 -->

</table>

<script>

function reorderColumns(tableId, order) {

    const table = document.getElementById(tableId);

    const header = table.querySelector('tr');

    const newHeader = header.cloneNode(true); // 復制表頭以便重新排序列

    const newBody = document.createElement('tbody'); // 創建新的tbody

    // 移除原始表頭和tbody，以便重新構建

    while (table.firstChild) {

        if (table.firstChild.nodeName === 'TBODY') {

            table.removeChild(table.firstChild);

        } else if (table.firstChild.nodeName === 'TR') {

            break; // 停止在第一個tbody之前的行（通常是表頭）

        }

    }

    // 重新排序表頭和內容行

    order.forEach(index => {

        const th = newHeader.children[index]; // 獲取新的表頭列

        newHeader.removeChild(th); // 移除以避免重復添加

        header.appendChild(th); // 添加到原始表頭中，順序已改變

        // 查找并復制相應的行數據到新tbody中

        Array.from(table.querySelectorAll('tr')).forEach(row => {

            const td = row.children[index]; // 獲取相應列的單元格

            const newRow = newBody.querySelector(`tr:nth-child(${Array.from(newBody.children).indexOf(row) + 1})`) || document.createElement('tr'); // 獲取或創建新行

            if (!newBody.contains(newRow)) { // 如果行不存在則添加到新tbody中

                newBody.appendChild(newRow);

            }

            newRow.appendChild(td); // 添加單元格到新行中

        });

    });

    // 將新表頭和新的tbody插入到表格中

    table.appendChild(newHeader);

    table.appendChild(newBody);

}

// 示例：將列重新排序為 [2, 0, 1]（城市，姓名，年齡）

reorderColumns('myTable', [2, 0, 1]);

</script>