Swap table rows using javascript

Question

Am trying to do like this,

<table>
    <tr id="ID1"><td></td></tr>
    <tr id="ID2"><td></td></tr>
</table>

I need to swap table rows index position like as follows

<table>
    <tr id="ID2"><td></td></tr>
    <tr id="ID1"><td></td></tr>
</table>

I tried to fix it using jQuery as:

$('#ID1').after('#ID2');

Can anyone help me to fix the above requirement using javascript?

$('#ID1').after('#ID2');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id="ID1">
    <td></td>
  </tr>
  <tr id="ID2">
    <td></td>
  </tr>
</table>

Rory McCrossan · Accepted Answer · 2014-10-27 09:35:07Z

4

after() is used to insert content. To move or add elements, use insertAfter():

$('#ID1').insertAfter('#ID2');

Example fiddle

answered Oct 27, 2014 at 9:35

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.J. Crowder Over a year ago

after can move things, but it doesn't if you give it a string. $('#ID2').after($('#ID1')); works, for instance: jsfiddle.net/sbkL785c/1

Rory McCrossan Over a year ago

@T.J.Crowder Good point. inserAfter is cleaner though as it just takes the selector.

T.J. Crowder Over a year ago

Yes. (And in general, insertAfter tends to be clearer to me anyway.) I was quite surprised by the OP's after behavior, though -- the docs suggest the two are just converses of each other, when clearly that's not quite the case.

Kalamarico · Accepted Answer · 2017-11-05 23:41:27Z

0

Swap row by appendChild.

var x = document.getElementById("first");
var table = document.getElementById("table");
table.appendChild(x);

 <table id="table">
    <tr id="first"><td>First</td></tr>
    <tr id="second"><td>Second</td></tr>
 </table>

edited Nov 5, 2017 at 23:41

Kalamarico

5,71622 gold badges57 silver badges74 bronze badges

answered Nov 5, 2017 at 23:13

user3235365

213 bronze badges

Collectives™ on Stack Overflow

Swap table rows using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related