在html表中上下移动行

<table id="myTable">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
</table>

<button id="moveUp">Move Up</button>
<button id="moveDown">Move Down</button>

$(document).ready(function(){
    var selected = null;

    // 选择行
    $('#myTable tr').click(function() {
        selected = $(this);
        $('#myTable tr').removeClass('highlight');
        $(this).addClass('highlight');
    });

    // 向上移动
    $('#moveUp').click(function() {
        if (selected != null && selected.index() > 0) {
            selected.insertBefore(selected.prev());
        }
    });

    // 向下移动
    $('#moveDown').click(function() {
        if (selected != null && selected.index() < $('#myTable tr').length - 1) {
            selected.insertAfter(selected.next());
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>