jquery - 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!

Answer 1

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>