js表格,行之间的拖动

最新推荐文章于 2024-01-16 09:49:53 发布

原创最新推荐文章于 2024-01-16 09:49:53 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

45 篇文章

订阅专栏

这个示例展示了如何使用JavaScript实现HTML表格中行之间的拖动排序功能。通过监听mousedown、mousemove和mouseup事件，实现选中行、鼠标移动时的视觉提示以及释放鼠标时的行插入操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缺少js库文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<title></title>
<script type="text/javascript">

   //表格排序
   function tableSort()
   {
       var tbody = $('#homepage_carouse_table > tbody');
       var rows = tbody.children();
       var selectedRow;
       var currentCol;
       //压下鼠标时选取行
       rows.mousedown(function(){
           selectedRow = this;
           currentCol = this.rowIndex;
           tbody.css('cursor', 'move');
           return false;   //防止拖动时选取文本内容，必须和 mousemove 一起使用
       });
       rows.mousemove(function(){
           return false;   //防止拖动时选取文本内容，必须和 mousedown 一起使用
       });
       //释放鼠标键时进行插入
       rows.mouseup(function(){
           if(selectedRow)
           {
               if(selectedRow != this)
               {

                   var insertCol = this.rowIndex;
                   if(insertCol <= currentCol){
                       $(this).before($(selectedRow)).removeClass('mouseOver');
                   }else{
                       $(this).after($(selectedRow)).removeClass('mouseOver');
                   }
                   //自己的代码
               }
               tbody.css('cursor', 'default');
               selectedRow = null;
           }
       });
       //标示当前鼠标所在位置
       rows.hover(
           function(){
               if(selectedRow && selectedRow != this)
               {
                   $(this).addClass('mouseOver');   //区分大小写的，写成 'mouseover' 就不行
               }
           },
           function(){
               if(selectedRow && selectedRow != this)
               {
                   $(this).removeClass('mouseOver');
               }
           }
       );

       //当用户压着鼠标键移出 tbody 时，清除 cursor 的拖动形状，以前当前选取的 selectedRow
       tbody.mouseover(function(event){
           event.stopPropagation(); //禁止 tbody 的事件传播到外层的 div 中
       });

   }
</script>
</head>
<body onload="tableSort()">

<div class="table_con" align="center">
   <table id="homepage_carouse_table">
   <thead>
       <tr class="tb_title" style="background:#eff3f5; height:45px; border-bottom:none}">
           <td width="30%">标题</td>
           <td width="40%">内容</td>
            <td width="40%">时间</td>
        </tr>
      </thead>
         <tbody>

        <tr>
           <td width="30%">鲜花</td>
           <td width="30%">真漂亮</td>
            <td width="40%">2016-10-31</td>
        </tr>

       <tr>
           <td width="30%">包子</td>
           <td width="30%">很好吃</td>
            <td width="40%">2016-10-30</td>
        </tr>


          <tr>
           <td width="30%">南京</td>
           <td width="30%">不错的城市真漂亮</td>
            <td width="40%">2016-10-29</td>
        </tr>

       <tr>
           <td width="30%">面包</td>
           <td width="30%">好难吃</td>
            <td width="40%">2016-10-28</td>
        </tr>

    </tbody>
    </table>

</div>
</body>
</html>