Tanker Tanker - 1 month ago 6
HTML Question

How to move/reorder an html table row

The idea is to move a particular table row to a different location

HTML

<table id="grid1" class="table table-zebra">
<tbody>
<tr>
<td>Cont 1 tr 1</td>
</tr>
<tr>
<td>Cont 2 tr 2</td>
</tr>
<tr>
<td>Cont 3 tr 3</td>
</tr>
<tr>
<td>Cont 4 tr 4</td>
</tr>
<tr>
<td>Cont 5 tr 5</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 7 tr 7</td>
</tr>
<tr>
<td>Cont 8 tr 8</td>
</tr>
<tr>
<td>Cont 9 tr 9</td>
</tr>
<tr>
<td>Cont 10 tr 10</td>
</tr>
<tr>
<td>Cont 11 tr 11</td>
</tr>

<tr>
<td>Cont 12 tr 12</td>
</tr>

<tr>
<td>Cont 13 tr 13</td>
</tr>

<tr>
<td>Cont 14 tr 14</td>
</tr>
</tbody>
</table>


That is the basic table, now, how do I can I move the TR 11 in a away that it will be under TR 4, I'm sorry that I don't post any JS but I have no idea how to do it... I was looking at this JSbin which is nice but can't use it..

Answer

Move the 11th tr to under the 4th:

 $("tbody tr:nth-child(11)").insertAfter("tbody tr:nth-child(4)");

Working demo

Comments