使用 javascript function 交換 html 表中的 2 列

Question

我需要寫一個 Javascript function 將第二列與第三列交換，我們將打開控制台並編寫您的 function 然后調用它進行測試。

索引.html

    <table style="margin:auto;" id="tabel1" class="mytabel" width="300" height="400" cellspacing="0" cellpadding="0"
        border="1">
        <tbody>
            <tr>
                <td> A1 </td>
                <td> A2 </td>
                <td> A3 </td>
            </tr>
            <tr>
                <td> B1 </td>
                <td> B2 </td>
                <td> B3 </td>
            </tr>
            <tr>
                <td> C1 </td>
                <td> C2 </td>
                <td> C3 </td>
            </tr>
        </tbody>
    </table>

script.js（到目前為止）

function swap(){
    //Write your code here

    var tRows = document.getElementById('tabel1').children[0].children;

    var column2 = [];
    var column3 = [];


    for(var i = 0; i < tRows.length; i++) {
        column2[i] = tRows[i].children[1];
        column3[i] = tRows[i].children[2];
    }

    console.log("cell2 " , column2);
    console.log("cell3 " , column3);

}

swap();

Answer 1

單獨嘗試（無需在其周圍使用 function - 只需將其直接放在瀏覽器控制台中即可）：

document.querySelectorAll('#tabel1 tr').forEach(tr=>tr.append(tr.querySelectorAll('td')[1]))

對於表的每一行，這可以通過將第二個（索引 1）td 附加到行的末尾來實現。 當您 append 某處的元素時，它會從原來的位置移除。

 function swap(){ document.querySelectorAll('#tabel1 tr').forEach(tr=>tr.append(tr.querySelectorAll('td')[1])) } swap();

 <table style="margin:auto;" id="tabel1" class="mytabel" width="300" height="400" cellspacing="0" cellpadding="0" border="1"> <tbody> <tr> <td> A1 </td> <td> A2 </td> <td> A3 </td> </tr> <tr> <td> B1 </td> <td> B2 </td> <td> B3 </td> </tr> <tr> <td> C1 </td> <td> C2 </td> <td> C3 </td> </tr> </tbody> </table>

Answer 2

您可以遍歷所有行並使用.insertBefore來切換它們的位置。

function swap(){
    const rows = document.querySelectorAll("#tabel1 > tbody > tr");
    for(const row of rows){
      row.insertBefore(row.children[2], row.children[1]);
    }
}

演示：

 function swap(){ const rows = document.querySelectorAll("#tabel1 > tbody > tr"); for(const row of rows){ row.insertBefore(row.children[2], row.children[1]); } } swap();

 <table style="margin:auto;" id="tabel1" class="mytabel" width="300" height="400" cellspacing="0" cellpadding="0" border="1"> <tbody> <tr> <td> A1 </td> <td> A2 </td> <td> A3 </td> </tr> <tr> <td> B1 </td> <td> B2 </td> <td> B3 </td> </tr> <tr> <td> C1 </td> <td> C2 </td> <td> C3 </td> </tr> </tbody> </table>

Answer 3

您需要注意表格可以有 header 和頁腳部分，以及多個 tbody。

使用children[0] .children 有點太抽象了，有歷史行和單元格collections 比選擇器更容易使用和語義化。

在單個 tbody 的情況下，您可以獲取表格的rows ，然后調整每一行的cells ，例如：

 function swapCells() { Array.from(document.querySelector('#tabel1').rows).forEach(row => row.append(row.cells[1])); }

 <table style="margin:auto;" id="tabel1" class="mytabel" width="300" height="100" cellspacing="0" cellpadding="0" border="1"> <tbody> <tr><td> A1 </td><td> A2 </td><td> A3 </td></tr> <tr><td> B1 </td><td> B2 </td><td> B3 </td></tr> <tr><td> C1 </td><td> C2 </td><td> C3 </td></tr> </tbody> </table> <button onclick="swapCells()">Swap rows</button>

PS 拼寫錯誤的“標簽”是一個額外的挑戰。 :-)

Answer 4

您可以使用childNodes而不是children ，以下代碼將解決該問題：

 table.insertBefore(table.childNodes[1].childNodes[3], table.childNodes[2].childNodes[5])

其中 table 是 Table 元素，=> childNodes[1] 是<tbody> （因為節點的工作方式。第 0 個元素實際上是空文本）=> childNodes[3] 和 [5] 是<tr> s (計算文本節點）