欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2022-06-25 08:06:50|栏目:jquery|点击:

本文实例为大家分享了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,各位看看即可,欢迎提出修改意见。

上一篇:基于jQuery实现收缩展开功能

栏    目:jquery

下一篇:jquery toolbar与网页浮动工具条具体实现代码

本文标题:jquery实现表格行的上下移动和置顶

本文地址:http://www.codeinn.net/misctech/205866.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有