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,各位看看即可,欢迎提出修改意见。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • jQuery实现table中的tr上下移动并保持序号不变的实例代码

    jQueryMoveTr.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></sc

  • jQuery表格行上移下移和置顶的实现方法

    我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. 运行效果图: HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr&

  • jQuery实现表格行上下移动和置顶效果

    我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <

  • jQuery实现表格行上移下移和置顶的方法

    本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <ti

  • 基于Jquery的表格隔行换色,移动换色,点击换色插件

    效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt

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

    本文实例为大家分享了jquery实现表格行的上下移动和置顶的具体代码,供大家参考,具体内容如下 先上效果图: 点击上移.下移.置顶,可以实现对应的效果. 上代码: <td>     <a href="javascript:" data-opt="delete" class="layui-btn layui-btn-mini layui-btn-danger">删除</a>     {{# if(index &g

  • jQuery实现表格行数据滚动效果

    本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码,供大家参考,具体内容如下 HTML代码: <div class="box"> <div class="box-header"> <div class="col">测试1</div> <div class="col">测试2</div> <div class="col"

  • jquery实现表格行拖动排序

    本文实例为大家分享了jquery实现表格行拖动排序的具体代码,供大家参考,具体内容如下 引入JS <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> html代码 <!doctype html> <html> <head>     <meta charset="U

  • 基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

    一.手风琴菜单效果图及代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴效果制作</title> <link rel="stylesheet" href="../css/reset.css"> <style> .con{ wi

  • jquery调整表格行tr上下顺序实例讲解

    表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下 代码实例如下: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

  • jQuery实现的调整表格行tr上下顺序

    表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>我们<

  • JQuery 表格操作(交替显示、拖动表格行、选择行等)

    JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码 代码如下: <script type='text/javascript'><!--     $(function(){         //交替显示行         $('#alternation').click(function(){                             $('tbody > tr:odd', $('#example')).toggleClass('alternatio

随机推荐