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