在HTML中更改行中单元格的索引

Question

我有以下表格：

<table class="AMDetailTableCss" id="tblQueueHistory" cellspacing="5" cellpadding="5" >
    <tr>
        <td id="Working">
            <div class="AMQueueName AMWorkingAgent"><div>
            <span class="AMQueueText">Working</span>
            </div></div>
        </td>
        <td id="OnBreak">
            <div class="AMQueueName AMOnBreakAgent"><div>
            <span class="AMQueueText">On Break</span>
            </div></div>
        </td>
        <td id="Idle">
            <div class="AMQueueName AMIdleAgent"><div>
            <span class="AMQueueText">Idle</span>
            </div></div>
        </td>
    </tr>
</table>

我想在运行时使用javascript / Jquery更改td的索引。我的意思是第二个td应该被移到第一个。

我该怎么做？感谢

Answer 1

试试这个：

$("#OnBreak").detach().insertBefore("#Working")

Example fiddle

使用detach()可确保分配给td的所有事件或数据也会被移动。

Answer 2

var firstHtml=$('#Working').html();
var secondHtml=$('#OnBreak').html();

$('#OnBreak').html(firstHtml);
$('#Working').html(secondHtml);

Demo

Answer 3

你想什么时候这样做？

$("#OnBreak").prependTo($("#OnBreak").parent());