「已注销」 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日

悬赏问题

  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统