table的tr行移

最新推荐文章于 2022-03-21 13:47:51 发布

weixin_34319111

最新推荐文章于 2022-03-21 13:47:51 发布

阅读量189

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010157082

版权

图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>table的tr行移</title>
    <style>
        .my_tab{
            text-align: center;
        }
    </style>
</head>

<body>
    <table class="my_tab" style="width: 500px;margin:20px auto;margin-bottom:0;">
        <tr class="move">
            <th style="width: 10%">
                序 号
            </th>
            <th style="width: 15%">
                职位
            </th>
            <th style="width: 15%">
                姓名
            </th>
            <th style="width: 30%">
                顺序
            </th>
        </tr>
    </table>
    <table class="my_tab" style="margin:0 auto;width: 500px;">
        <tr class="move">
            <td class="tab_num" style="width: 10%">
                1
            </td>
            <td style="width: 15%">
                我的安保人员
            </td>
            <td style="width: 15%">
                王大锤1
            </td>
            <td style="width: 30%">
                <a class="downarrow" href="#" title="向下移">向下移</a>
                <a class="uparrow" href="#" title="向上移">向上移
                </a>
            </td>
        </tr>
        <tr class="move">
            <td class="tab_num">
                2
            </td>
            <td>
                我的秘书
            </td>
            <td>
                王小秘2
            </td>
            <td>
                <a class="downarrow" href="#" title="向下移">向下移</a>
                <a class="uparrow" href="#" title="向上移">向上移
                </a>
            </td>
        </tr>
        <tr class="move">
            <td class="tab_num">
                3
            </td>
            <td>
                我的安保人员
            </td>
            <td>
                王大锤3
            </td>
            <td>
                <a class="downarrow" href="#" title="向下移">向下移</a>
                <a class="uparrow" href="#" title="向上移">向上移
                </a>
            </td>
        </tr>
        <tr class="move">
            <td class="tab_num">
                4
            </td>
            <td>
                我的秘书
            </td>
            <td>
                王小秘4
            </td>
            <td>
                <a class="downarrow" href="#" title="向下移">向下移</a>
                <a class="uparrow" href="#" title="向上移">向上移
                </a>
            </td>
        </tr>
        <tr class="move">
            <td class="tab_num">
                5
            </td>
            <td>
                我的安保人员
            </td>
            <td>
                王大锤5
            </td>
            <td>
                <a class="downarrow" href="#" title="向下移">向下移</a>
                <a class="uparrow" href="#" title="向上移">向上移
                </a>
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    /*
              params
              t:触发事件的元素
              oper:操作方式
        */
    $(function() {
        function check(t, oper) {
            var data_tr = $(t).parent("td").parent("tr"); //获取到触发的tr
            if (oper == "MoveUp") { //向上移动
                if ($(data_tr).prev().html() == null) { //获取tr的前一个相同等级的元素是否为空
                    alert("已经是最顶部了!");
                    return;
                } {
                    $(data_tr).insertBefore($(data_tr).prev()); //将本身插入到目标tr的前面 
                    var cur_num = $(data_tr)[0].rowIndex + 2; //获取当前行行号
                    $(data_tr).find(".tab_num").text(cur_num - 1); //当前行上移后序号变为cur_num-1
                    $(data_tr).next("tr").find(".tab_num").text(cur_num); //当前行移动前的前一行下移后序号变为cur_num
                }
            } else {
                if ($(data_tr).next().html() == null) {
                    alert("已经是最低部了!");
                    return;
                } {
                    $(data_tr).insertAfter($(data_tr).next()); //将本身插入到目标tr的后面 
                    var cur_num = $(data_tr)[0].rowIndex; //获取当前行行号
                    $(data_tr).find(".tab_num").text(cur_num + 1); //当前行下移后序号变为cur_num
                    $(data_tr).prev("tr").find(".tab_num").text(cur_num); //当前行移动前的下一行上移后序号变为cur_num
                }
            }
        }
        $(".downarrow").on("click", function() {
            check(this, "MoveDown");

        })
        $(".uparrow").on("click", function() {
            check(this, "MoveUp");
        })
    })
    </script>
</body>

</html>

weixin_34319111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table的tr行移

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table的tr行移</title> <style> .my_tab{...
复制链接

扫一扫