实现固定表头，并有左右拉宽的效果

最新推荐文章于 2024-08-12 17:54:40 发布

ling…

最新推荐文章于 2024-08-12 17:54:40 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/chai_tian/article/details/121626373

此博客展示了一个使用HTML、CSS和JavaScript实现的交互式表格，允许用户通过拖动边框来动态调整表格第一列和第二列的宽度。代码中包含了事件监听、鼠标样式改变以及拖动过程中列宽的实时更新等功能，为网页表格提供了一种自定义布局的解决方案。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .table {
        border-collapse: collapse;
        height: 300px;
    }
    thead {
    width: calc(100% - 1em); 
    text-align: left;
      
  } 
  .last {
     width: 14px;
    }
  thead, tbody tr {
    display: table;
    width: calc(100% - 3px);
    table-layout: fixed;
  }
  tbody {
    display: block;
    height: calc(100% - 25px);  
    overflow-y: scroll;  
  }

  tbody > tr > td, tbody > tr > th {
    line-height: 2em;
  }


    </style>
</head>
<body>
    <div class="">
        <table class="table " border="1px">
            <thead>
            <tr onmousemove="movear(event)" onmouseleave="mleave()">
                <th class="a" style="min-width: 100px;">qweqwe</th>
                <th class="b" style="min-width: 100px;">asdasd</th>
                <th  style="min-width: 100px;">asdasd</th>
                <th class="last"></th> 
            </tr>
            </thead>
            <tbody>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr >
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>123</td>
                    <td >123</td>
                    <td>123</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    
     // 处理第一条边框线的状态
     var aisDrag = null;
    var aclick = null;
    // 处理第二条边框线的状态
    var bisDrag = null;
    var bclick = null;
    var mouseStatu = null
    // 鼠标移动到边框线范围之后变化样式并获取第一列和第二列td的宽度和offset(left)的总和
    function movear(e) {
        // 第一列
        var atdleft = $('.a').offset();
        var ase = atdleft.left + $('.a').width() - 10;
        var aright = ase + 55;
        // 第二列
        var btdleft = $('.b').offset();
        var bse = btdleft.left + $('.b').width() - 10;
        var bright = bse + 55;
        // 根据鼠标位置来判断当前处于哪一列的边框线
        if (ase < e.pageX && e.pageX < aright) {
            console.log(123);
            // 第一列
            // 让aclick为true触发下面的点击拖动事件
            aclick = true;
            // 更改鼠标的样式
            $('table').css('cursor', 'e-resize');
        } else if (bse < e.pageX && e.pageX < bright) {
            console.log(456);
            // 第二列
            // 让bclick为true触发下面的点击拖动事件
            bclick = true;
            // 更改鼠标的样式
            $('table').css('cursor', 'e-resize');
        } else {
            // 如果不在范围内就禁锢状态
            aclick = false;
            bclick = false;
            aisDrag = false;
            bisDrag = false;
            // 鼠标样式还原
            $('table').css('cursor', 'auto');
        };
    };
    // 通过鼠标按下事件来监听鼠标移动事件
    document.addEventListener('mousedown', function () {
        // 鼠标按下之后mouseStatu为false防止触发mouseleave事件
        mouseStatu=false
        if (aclick) {
            aisDrag = true;
            document.onmousemove = function (a) {
                if (aisDrag) {
                    // 让第一列的宽度等于当前鼠标的offset（left）值
                    var apageX = a.pageX - 10;
                    $('tr th:nth-child(1)').width(apageX);
                    $('tr td:nth-child(1)').width(apageX);
                };
            };
        };
        if (bclick) {
            bisDrag = true;
            document.onmousemove = function (a) {
                if (bisDrag) {
                    // 让第二列的宽度等于当前鼠标的offset（left）值减去第一列的宽度
                    console.log($('tr th:nth-child(2)').width());
                    if($('tr th:nth-child(2)').width()>100){
                        var bpageX = a.pageX - $('tr th:nth-child(1)').width();
                    $('tr th:nth-child(2)').width(bpageX - 15);
                    $('tr td:nth-child(2)').width(bpageX - 15);
                    }
                    
                };
            };
        }
    });
    // 鼠标松开之后让所有状态为false
    document.addEventListener('mouseup', function () {
        // 鼠标松开之后让mouseStatu为true 触发离开事件清除状态
        mouseStatu=true
        aclick = false;
        aisDrag = false;
        bisDrag = false;;
        bclick = false;
    });
    // 鼠标离开之后再次清空状态 防止出现拖动完第二列的表格之后，点击别处仍然可以触发一次鼠标拖动第二列的BUG
    function mleave(params) {
        if(mouseStatu){
            aclick = false;
            aisDrag = false;
            bisDrag = false;
            bclick = false;
        }
        
    };
</script>
</html>