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

Answer 2

您可以使用与为任何变量交换内容相同的方式来执行此操作：

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