「已注销」 2023-04-21 15:32 采纳率: 83.3%
浏览 13
已结题

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

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

img

  • 写回答

1条回答 默认 最新

  • 简效 2023-04-21 15:39
    关注
    
<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 4月29日
  • 已采纳回答 4月21日
  • 创建了问题 4月21日

悬赏问题

  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行，主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习，前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时，程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题
  • ¥15 (标签-Python|关键词-socket)