Tauschen Td Elemente der Tabelle mit Javascript

Question

Gibt es eine einfache Möglichkeit zum Austauschen von Elementen einer HTML-Tabelle mit Javascript?

zum Beispiel eine Tabelle wie folgt mit:

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

Ich will es zur Verfügung stellen Zellen zu tauschen. Danke!

Answer 1

Man könnte es auf die gleiche Art und Weise tun Sie Inhalte für jede Variable tauschen:

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

Answer 2

ich geschrieben habe ein kleines Funktionselement zu tauschen. Übergeben Sie als Argumente das übergeordnete Element (Container mit Swapping-Elementen) und zwei Zahlen (Index) der untergeordneten Elemente, die Sie austauschen möchten.

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; 
 
\t 
 
    elemB = elemA<elemB ? elemB--:elemB; 
 
    var childNumb = children.length - 1; 
 
\t 
 
    var a = parent.removeChild(children[elemA]); 
 
    var b = parent.removeChild(children[elemB]); 
 
    append(elemB,a); 
 
    append(elemA,b); 
 
\t 
 
     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>