jquery 实现表格行的上下移动和置顶

先上效果图:
这里写图片描述
点击上移、下移、置顶,可以实现对应的效果。
上代码:

<td>
            <a href="javascript:" data-opt="delete" class="layui-btn layui-btn-mini layui-btn-danger">删除</a>
            {{# if(index > 0){ }}  //layui的模板语法
            <a href="javascript:" data-opt="moveup" class="layui-btn layui-btn-mini">上移</a>
            <a href="javascript:" data-opt="movetop" class="layui-btn layui-btn-mini">置顶</a>
            <a href="javascript:" data-opt="movedown" style="display: none;" class="layui-btn layui-btn-mini">下移</a>
            {{# } else if(index ==0){ }}
            <a href="javascript:" data-opt="movedown"  class="layui-btn layui-btn-mini">下移</a>
            <a href="javascript:" data-opt="moveup" style="display: none;"  class="layui-btn layui-btn-mini">上移</a>
            <a href="javascript:" data-opt="movetop" style="display: none;"  class="layui-btn layui-btn-mini">置顶</a>
            {{# } }}

        </td>
  $('#content').children("tr").each(function (index) {
           var $that_tr=$(this);
           var diseaseDoctorId=$that_tr.data("id");
           $that_tr.children("td:last-child").children("a").each(function () {
               var $that_a=$(this);
               var action=$that_a.data("opt");
               $that_a.on('click',function (e) {
                   switch (action){
                       case 'delete':
                           var name = $that.parent('td').siblings('td[data-field=name]').text();
                           //询问框
                           layerTips.confirm('确定要删除[ <span style="color:red;">' + name + '</span> ] ?', { icon: 3, title: '系统提示' }, function (index) {


                               $.ajax({
                                   url:'<%=staticPath%>/doctor/diseaseDoctor/delere/'+diseaseDoctorId,
                                   type:'get',
                                   dataType:'json',
                                   success:function (result) {
                                       if (result.code==200) {
                                           layer.msg("删除成功");
                                           location.reload();
                                       }
                                       else
                                           layer.msg("删除失败");
                                   },
                                   error:function (result) {
                                       layer.msg("删除失败");
                                   }
                               });
                           });
                           break;
                       case 'moveup':
                           console.log("上移");
                           var prev=$that_a.parents("tr").prev();
                           var prevIndex=$(prev).index('tr');
                           $that_a.parents("tr").insertBefore(prev);

                               if(prevIndex==1){
                                   $that_a.prop("style","display:none");
                                   $that_a.siblings("a[data-opt=movetop]").prop("style","display:none");
                                   $that_a.siblings("a[data-opt=movedown]").prop('style','display:');
                                   $(prev).children("td:last-child").find("a[data-opt=movedown]").prop("style","display:none");
                                    $(prev).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:");
                                    $(prev).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:");
                               }

                           break;
                       case 'movetop':
                           console.log("置顶");
                               var first=$that_a.parents("tr").siblings("tr:first");
                               $that_a.parents("tr").insertBefore(first);
                           $(first).children("td:last-child").find("a[data-opt=movedown]").prop("style","display:none");
                           $(first).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:");
                           $(first).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:");
                           $that_a.siblings("a[data-opt=moveup]").prop("style","display:none");
                           $that_a.prop("style","display:none");
                           $that_a.siblings('a[data-opt=movedown]').prop("style","display:");
                           break;
                       case 'movedown':
                           console.log("下移");
                           var next=$that_a.parents("tr").next();
                               $that_a.parents("tr").insertAfter(next);
                               $that_a.siblings("a[data-opt=moveup]").prop("style","display:");
                               $that_a.siblings("a[data-opt=movetop]").prop("style","display:");
                               $that_a.prop("style","display:none");
                               $(next).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:none");
                               $(next).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:none");
                               $(next).children("td:last-child").find('a[data-opt=movedown]').prop("style","display:");


                           break;
                   }
               });
           });
        });

我是做后台的,js写的可能比较 low,各位看看即可,欢迎提出修改意见

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天进步一点_点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值