纯js怎么做表格数据上移下移呀

纯js怎么做表格数据上移下移呀，就是点击对应按钮，数据上移或者下移一行

img


<!DOCTYPE html>
<html>
    <body>
        <table id="my-table">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>John Doe1</td>
                    <td><button class="up">Up</button> <button class="down">Down</button></td>
                </tr>
                <tr>
                    <td>Jane Smith</td>
                    <td>Jane Smith1</td>
                    <td><button class="up">Up</button> <button class="down">Down</button></td>
                </tr>
                <tr>
                    <td>Bob Johnson</td>
                    <td>Bob Johnson1</td>
                    <td><button class="up">Up</button> <button class="down">Down</button></td>
                </tr>
            </tbody>
        </table>

        <script>
            var upButtons = document.querySelectorAll('.up');
            var downButtons = document.querySelectorAll('.down');

            for (var i = 0; i < upButtons.length; i++) {
                upButtons[i].addEventListener('click', moveUp);
            }

            for (var i = 0; i < downButtons.length; i++) {
                downButtons[i].addEventListener('click', moveDown);
            }

            function moveUp() {
                var row = this.parentElement.parentElement;
                if (row.previousElementSibling) {
                    row.parentElement.insertBefore(row, row.previousElementSibling);
                }
            }

            function moveDown() {
                var row = this.parentElement.parentElement;
                if (row.nextElementSibling) {
                    row.parentElement.insertBefore(row.nextElementSibling, row);
                }
            }
        </script>

    </body>
</html>