table的数据行tr上下移动

最新推荐文章于 2023-08-07 15:31:30 发布

jiao732

最新推荐文章于 2023-08-07 15:31:30 发布

阅读量4.6k

点赞数 2

分类专栏： Web前端文章标签： table 移动行

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文链接：http://www.cnblogs.com/taochen/articles/2344891.html

昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔google找了几个demo，发现demo是实现了效果，但是代码很多，最后还是决定自己用jquery写个吧，

首先将前端效果分析出编程逻辑，上下移动就是将数据行互换位置，互换为之前判断是否置顶或则最后一个，翻阅jquery文档发现insertBefore和insertAfter2个函数就可以解决问题，先看我实现的效果吧。

下图是表格初始状态：

点击上图第二行的“上移”后出现下图效果:

实现效果的JS代码:

<script type="text/javascript">
      /*
      params
      t:触发事件的元素
      oper:操作方式
*/
    function check(t,oper){
        var data_tr=$(t).parent().parent(); //获取到触发的tr
            if(oper=="MoveUp"){    //向上移动
               if($(data_tr).prev().html()==null){ //获取tr的前一个相同等级的元素是否为空
                   alert("已经是最顶部了!");
                   return;
               }{
                    $(data_tr).insertBefore($(data_tr).prev()); //将本身插入到目标tr的前面 
               }
               }else{
                     if($(data_tr).next().html()==null){
                     alert("已经是最低部了!");
                     return;
                 }{
                      $(data_tr).insertAfter($(data_tr).next()); //将本身插入到目标tr的后面 
                 }
               }
    }
</script>

如需同步到数据库中，则在执行insertBefore和insertAfter之前$.ajax将当前的排序和目标数据的排序调换一下，将insertBefore和InsertBefore插入到success:function()中，

如果失败error:function(){alert("移动失败")}。

Html代码:

<style type="text/css">
    table{border-collapse:collapse;}
    table th{width:100px;height:30px;text-align:center;}
    table td{width:100px;height:25px;text-align:center;font-size:14px;}
</style>
</head>

<body>
<div>
<table>
    <thead>
        <tr>
            <th class="ui-widget-header">编号</th>
            <th class="ui-widget-header">姓名</th>
            <th class="ui-widget-header">年龄</th>
            <th class="ui-widget-header">住址</th>
            <th class="ui-widget-header">操作</th>
        </tr>
    </thead>
    <tbody>
    <tr>
            <td class="ui-widget-content">1</td>
        <td class="ui-widget-content">张三</td>
        <td class="ui-widget-content">21<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">湖南</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">2</td>
        <td class="ui-widget-content">李四</td>
        <td class="ui-widget-content">22<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">湖北</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">3</td>
        <td class="ui-widget-content">王五</td>
        <td class="ui-widget-content">34<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">河北</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">4</td>
        <td class="ui-widget-content">赵六</td>
        <td class="ui-widget-content">32<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">河南</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">5</td>
        <td class="ui-widget-content">田七</td>
        <td class="ui-widget-content">38<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">山东</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">6</td>
        <td class="ui-widget-content">戴久</td>
        <td class="ui-widget-content">65<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">北京</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">7</td>
        <td class="ui-widget-content">林十</td>
        <td class="ui-widget-content">45<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">新疆</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">8</td>
        <td class="ui-widget-content">陈坤</td>
        <td class="ui-widget-content">28<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">安徽</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">9</td>
        <td class="ui-widget-content">程斌</td>
        <td class="ui-widget-content">29<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">黑龙江</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
     <tr>
         <td class="ui-widget-content">10</td>
        <td class="ui-widget-content">刘潇</td>
        <td class="ui-widget-content">25<input type="hidden"  name="test" value="111" class="conids"/></td>
        <td class="ui-widget-content">西藏</td>
        <td class="ui-widget-content"><a href="#" οnclick="check(this,'MoveUp')">上移</a>  <a href="#" οnclick="check(this,'MoveDown')">下移</a></td>
    </tr>
  </tbody>
</table>

用Jquery实现代码简便了许多，前段时间开始接触前台继续学习中，如有建议改进请提出你的宝贵意见。