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

Question

I need to write a Javascript function to swap the second column with the third column, we will open the console and write your function then call it to test.

index.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 ( so far )

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

Try this alone (no need for a function around it - just put this directly in the browser console):

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

This works by, for each row of the table, appending the second (index 1) td to the end of the row. When you append an element somewhere, it is removed from where it was.

 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

You can loop over all the rows and use .insertBefore to switch their positions.

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

Demo:

 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

You need to be mindful that tables can have header and footer sections, as well as multiple tbodys.

Using children[0].children is a little too abstract, there are historic rows and cells collections that are easier to use and more semantic than selectors.

In the case of a single tbody, you can get the table's rows , then adjust each row's cells , eg:

 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 The misspelling "tabel" is an additional challenge. :-)

Answer 4

You could use childNodes instead of children the following code will solve the issue:

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

Where table is the Table element, => childNodes[1] is the <tbody> (because of how nodes work. the 0th element is actually empty text) => childNodes[3] and [5]are the <tr> s (counting in the text nodes)