Swapping td elements of table using javascript

Question

Is there a simple way of swapping elements of an html table using javascript?

for instance having a table like this:

<table>
<tr>
    <td class = "draggable">
        <div class = "droppable">Item 1</div>
    </td>
</tr>
<tr>
    <td class = "draggable">
        <div class = "droppable">Item 2</div>
    </td>
</tr>

I want to make it available to swap cells. Thanks!

Possible duplicate of [Is there a native jQuery function to switch elements?](http://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements) — Blauharley, Feb 12 '17 at 18:50
jQueryUI may seem helpful for you http://jqueryui.com/sortable/ — Paweł, Feb 12 '17 at 18:59

score 1 · Answer 1 · answered Feb 12 '17 at 19:25

I've written a little function to swap elements. Pass as arguments the parent (container of swapping elements), and two numbers (index) of the children elements that you want to be swapped.

var rowsParent = document.getElementById('sortRows');
var cellsParent = document.getElementById('sortCells');

swapElements(rowsParent,0,1);
swapElements(cellsParent,2,0);

function swapElements(parent,elemA,elemB){
    //a little of validation
    if(!parent||parent.constructor.toString().search('HTML')===-1) return;
    var children = parent.children;
    if(typeof elemA!=='number' || typeof elemB!=='number' || elemA===elemB || !children[elemA] || !children[elemB]) return;
 
    elemB = elemA<elemB ? elemB--:elemB;
    var childNumb = children.length - 1;
 
    var a = parent.removeChild(children[elemA]);
    var b = parent.removeChild(children[elemB]);
    append(elemB,a);
    append(elemA,b);
 
       function append(a,b){
          childNumb===a ? parent.appendChild(b) : parent.insertBefore(b,children[a]);
       }
}

table, td {
  border: solid 1px black;
  padding: 3px;
  margin: 15px;
}

<table>
  <tbody id="sortRows">
    <tr>
      <td>a 1</td>
      <td>a 2</td>
      <td>a 3</td>
      <td>a 4</td>
      <td>a 5</td>
    </tr>
    <tr id="sortCells">
      <td>b 1</td>
      <td>b 2</td>
      <td>b 3</td>
      <td>b 4</td>
      <td>b 5</td>
    </tr>
    <tr>
      <td>c 1</td>
      <td>c 2</td>
      <td>c 3</td>
      <td>c 4</td>
      <td>c 5</td>
    </tr>
    <tr>
      <td>d 1</td>
      <td>d 2</td>
      <td>d 3</td>
      <td>d 4</td>
      <td>d 5</td>
    </tr>
    <tr>
      <td>e 1</td>
      <td>e 2</td>
      <td>e 3</td>
      <td>e 4</td>
      <td>e 5</td>
    </tr>    
  </tbody>
</table>

Thanks! it helped me a lot. One thing I forgot to mention is that I would like to swap cells drag and dropping style. But your code is still helpfull. — kamus_pc, Feb 12 '17 at 19:41

score 0 · Answer 2 · answered Feb 12 '17 at 18:50

0

You could do it in the same way you swap contents for any variable:

var child1_HTML = $("table tr:nth-child(1)").html();
$("table tr:nth-child(1)").html($("table tr:nth-child(2)").html());
$("table tr:nth-child(2)").html(child1_HTML);

answered Feb 12 '17 at 18:50

Spencer Wieczorek

21,229
7
44
54

Swapping td elements of table using javascript

2 Answers2

Linked