使用JavaScript交换表的td元素 [英] Swapping td elements of table using javascript

问题描述

是否有使用javascript交换html表元素的简单方法?

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

例如具有这样的表:

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

推荐答案

我已经编写了一个交换元素的小函数.作为参数传递要交换的父元素(交换元素的容器)和两个数字(索引).

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>

这篇关于使用JavaScript交换表的td元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！