table---改变列的宽度

最新推荐文章于 2024-06-22 12:35:18 发布

aPanPan.

最新推荐文章于 2024-06-22 12:35:18 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： table html js

本文链接：https://blog.youkuaiyun.com/weixin_44481472/article/details/96435639

本文介绍如何通过原生JavaScript实现对HTML表格列宽的动态调整，详细讲解了相关的方法和步骤。

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

原生js改变表格列宽度~~~

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
 
<body>
    <table id="table" width="100%" border="1">
        <tbody>
            <tr align="center">
                <td style="width:100px;">id</td>
                <td>公司名称</td>
                <td>姓名</td>
                <td>岗位</td>
                <td>技术等级</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>2*</td>
                <td>软件公司</td>
                <td>某某</td>
                <td>web开发</td>
                <td>菜鸟</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        var tTD;
        var table = document.getElementById("table"); 		//获取表格
        for (i = 0; i < table.rows[0].cells.length; i++) {
            table.rows[0].cells[i].onmousedown = function() { //当用户按下鼠标按钮执行
                tTD = this;
                if (event.offsetX > tTD.offsetWidth - 10) {
                    tTD.mouseDown = true;
                    tTD.oldX = event.x;
                    tTD.oldWidth = tTD.offsetWidth;
                }
            };
            table.rows[0].cells[i].onmouseup = function() { //在用户鼠标按键被松开时执行
                if (tTD == undefined) tTD = this;
                tTD.mouseDown = false;
                tTD.style.cursor = 'default';
            };
            table.rows[0].cells[i].onmousemove = function() { //鼠标指针移动到元素上时触发
                if (event.offsetX > this.offsetWidth - 10)
                    this.style.cursor = 'col-resize';
                else
                    this.style.cursor = 'default';
                if (tTD == undefined) tTD = this;
                if (tTD.mouseDown != null && tTD.mouseDown == true) {
                    tTD.style.cursor = 'default';
                    if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                        tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                    tTD.style.width = tTD.width;
                    tTD.style.cursor = 'col-resize';
                    table = tTD;
                    while (table.tagName != 'TABLE') table = table.parentElement;
                    for (j = 0; j < table.rows.length; j++) {
                        table.rows[j].cells[tTD.cellIndex].width = tTD.width;
                    }
                }
            };
        }
    </script>
</body>
 
</html>