亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

js如何自由調(diào)整table列的順序

liguoquan
2025年6月23日 16:9 本文熱度 520
:js如何自由調(diào)整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); // 復(fù)制表頭以便重新排序列

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

 

    // 移除原始表頭和tbody,以便重新構(gòu)建

    while (table.firstChild) {

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

            table.removeChild(table.firstChild);

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

            break; // 停止在第一個(gè)tbody之前的行(通常是表頭)

        }

    }

 

    // 重新排序表頭和內(nèi)容行

    order.forEach(index => {

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

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

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

        // 查找并復(fù)制相應(yīng)的行數(shù)據(jù)到新tbody中

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

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

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

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

                newBody.appendChild(newRow);

            }

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

        });

    });

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

    table.appendChild(newHeader);

    table.appendChild(newBody);

}

 

// 示例:將列重新排序?yàn)?[2, 0, 1](城市,姓名,年齡)

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

</script>

?

該文章在 2025/6/23 16:09:07 編輯過(guò)
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved