JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<p>Will move the second row up or down, as you can see the Prio values resets to their default values when moved.</p>
<table id="myTable" style="width:300px">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Des</th>
            <th>Type</th>
            <th>Prio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>name 1</td>
            <td>desc</td>
            <td>type</td>
            <td>
                <select name="" id="dropdown">
                    <option value="">Low</option>
                    <option value="">Medium</option>
                    <option value="">High</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>another name</td>
            <td>more desc</td>
            <td>more types</td>
            <td>
                <select name="" id="dropdown2">
                    <option value="">Low</option>
                    <option value="">Medium</option>
                    <option value="">High</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>Eric</td>
            <td>Description</td>
            <td>another type</td>
            <td>
                <select name="" id="dropdown3">
                    <option value="">Low</option>
                    <option value="">Medium</option>
                    <option value="">High</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

<div>
<button onclick="moveRow(0, -1)">Move Row 0 Up</button>
<button onclick="moveRow(0, 1)">Move Row 0 Down</button>
</div>

<div>
<button onclick="moveRow(1, -1)">Move Row 1 Up</button>
<button onclick="moveRow(1, 1)">Move Row 1 Down</button>
</div>

<div>
<button onclick="moveRow(2, -1)">Move Row 2 Up</button>
<button onclick="moveRow(2, 1)">Move Row 2 Down</button>
</div>

CSS

table, th, td {
    border:1px solid black;
    border-collapse:collapse;
}
th, td {
    padding:5px;
}

JavaScript

function moveRow(index, direction) {
    var rows, rowToMove, pivotRow, tbody;
    tbody = document.getElementById('myTable').tBodies[0];
    rows = tbody.rows;

    // Sanity checking
    if (index === 0 && direction === -1) {
        return;
    }
    if (index === rows.length - 1 && direction === 1) {
        return;
    }

    rowToMove = rows[index];
    pivotRow = rows[index + direction];
    tbody.removeChild(rowToMove);
    if (direction === 1) {
        tbody.insertBefore(rowToMove, pivotRow.nextSibling);
    } else {
        tbody.insertBefore(rowToMove, pivotRow);
    }
}