javascriptを使用してテーブルのtd要素を交換する

Question

javascriptを使用してhtmlテーブルの要素を交換する簡単な方法はありますか？このようなテーブルを持つインスタンスの

：

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

私は、細胞を交換することが可能なようにしたいです。 ありがとう！

Answer 1

あなたが任意の変数の内容を交換するのと同じ方法でそれを行うことができます：私は要素をスワップするために少し機能を書いた

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

。引数として親（スワップ要素のコンテナ）とスワップする子要素の2つの数値（インデックス）を渡します。

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>