JSFiddle - React, Tailwind, and code Playground
HTML
<table class="myTable" border="1" width="80%">
<thead>
<tr >
<td></td>
<td>one</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>two</td>
<td><button onClick="MoveUp.call(this);">⇧</button></td>
<td><button onClick="MoveDown.call(this);">⇩</button></td>
</tr>
<tr>
<td></td>
<td>three</td>
<td><button onClick="MoveUp.call(this);">⇧</button></td>
<td><button onClick="MoveDown.call(this);">⇩</button></td>
</tr>
<tr>
<td></td>
<td>four</td>
<td><button onClick="MoveUp.call(this);">⇧</button></td>
<td><button onClick="MoveDown.call(this);">⇩</button></td>
</tr>
<tr>
<td></td>
<td>five</td>
<td><button onClick="MoveUp.call(this);">⇧</button></td>
<td><button onClick="MoveDown.call(this);">⇩</button></td>
</tr>
</tbody>
</table>
CSS
table.myTable {
counter-reset: rowNumber;
}
table.myTable tr {
counter-increment: rowNumber;
}
table.myTable tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
JavaScript
function get_previoussibling(n)
{
x=n.previousSibling;
while (x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
function get_nextsibling(n)
{
x=n.nextSibling;
while ( x != null && x.nodeType!=1)
{
x=x.nextSibling;
}
return x;
}
function MoveUp()
{
var table,
row = this.parentNode;
while ( row != null ) {
if ( row.nodeName == 'TR' ) {
break;
}
row = row.parentNode;
}
table = row.parentNode;
table.insertBefore ( row, get_previoussibling( row ) );
}
function MoveDown()
{
var table,
row = this.parentNode;
while ( row != null ) {
if ( row.nodeName == 'TR' ) {
break;
}
row = row.parentNode;
}
table = row.parentNode;
table.insertBefore ( row, get_nextsibling ( get_nextsibling( row ) ) );
}