swap 2 columns in a html table using a javascript function

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();

Unmitigated · Accepted Answer · 2020-07-25 21:07:06Z

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>

phhu · Accepted Answer · 2020-07-25 21:09:05Z

2

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>

edited Jul 25, 2020 at 21:09

answered Jul 25, 2020 at 21:06

phhu

2,0441 gold badge22 silver badges38 bronze badges

2 Comments

FluffyKitten Over a year ago

Code-only answers are discouraged on Stack Overflow, please update your answer to explain how this works and solves the question.

FluffyKitten Over a year ago

Much better :) Explaining the code makes the answer useful to other users with similar but not identical questions, as they can adapt the code to work in their situation.

RobG · Accepted Answer · 2020-07-25 21:25:46Z

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, e.g.:

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. :-)

Robert Csöllei · Accepted Answer · 2020-07-25 21:11:00Z

0

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)

answered Jul 25, 2020 at 21:11

Robert Csöllei

1

Collectives™ on Stack Overflow

swap 2 columns in a html table using a javascript function

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related