Question

I have following table:

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

I want to change the index of td at runtime using javascript/Jquery. I mean the second td should be moved to be the first.

How can I do this? Thanks

Answer 1

Try this:

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

Example fiddle

Using detach() will ensure that any events or data assigned to the td are moved too.