JSFiddle - React, Tailwind, and code Playground

by pettys

HTML

<table>
    <tbody>
        <tr><td>A</td></tr>
        <tr><td>B</td></tr>
        <tr><td>C</td></tr>
        <tr><td>D</td></tr>
        <tr><td>E</td></tr>
        <tr><td>F</td></tr>
        <tr><td>G</td></tr>
    </tbody>
</table>

JavaScript

function insertNodeAt(newIndex, $row) {
    var $detached = $row.detach();

    if (newIndex === 0) {
        $("table tbody").prepend($detached);
        return;
    }

    var nthChild = $("table tbody tr").eq(newIndex-1);
    nthChild.after($detached);

}

var $a = $("table tbody tr").eq(0);
var $b = $("table tbody tr").eq(1);
var $c = $("table tbody tr").eq(2);
var $d = $("table tbody tr").eq(3);


setTimeout(function() {insertNodeAt(6, $d);}, 1500); // ABCEFGD
setTimeout(function() {insertNodeAt(0, $a);}, 3000); // (no chg)
setTimeout(function() {insertNodeAt(0, $b);}, 4500); // BACEFGD
setTimeout(function() {insertNodeAt(0, $d);}, 6000); // DBACEFG
setTimeout(function() {insertNodeAt(1, $c);}, 6000); // DCBAEFG
setTimeout(function() {insertNodeAt(5, $a);}, 6000); // DCBEFAG