当前位置: 首页 > article >正文

js为table列宽度添加拖拽调整

 


//var table = document.getElementById("table1");
//addResize($(".layui-table")[0]);

/** Table添加列宽度调整 */
function addResize(table) {

    var td;
    var mousedown = function (event) {
        td = this;
        if (event.offsetX > td.offsetWidth - 10) {
            td.mouseDown = true;
            td.screenX0 = event.screenX;
            td.oldWidth = td.offsetWidth;
        }
        //console.log("onmousedown():" + event.screenX);
    };

    var mouseup = function (event) {
        if (td == undefined) td = this;
        td.mouseDown = false;
        td.style.cursor = 'default';
        //console.log("onmouseup():" + event.screenX);
    };

    var mousemove = function (event) {

        //更改鼠标样式
        if (event.offsetX > this.offsetWidth - 10)
            this.style.cursor = 'col-resize';
        else
            this.style.cursor = 'default';

        //调整宽度
        if (td == undefined) td = this;
        if (td.mouseDown != null && td.mouseDown == true) {

            if ((event.screenX - td.screenX0) != 0) {
                td.style.cursor = 'col-resize';

                td.width = td.oldWidth + (event.screenX - td.screenX0);
                td.style.width = td.width;
                //table.rows[0].cells[td.cellIndex].style.width = td.width
                //console.log("onmousemove():" + event.screenX);
            }
        }
    };

    // 修改表头列宽度信息	
    var cells = table.rows[0].cells;
    for (j = 0; j < cells.length; j++) {
        var cell = cells[j];
        cell.onmousedown = mousedown;
        cell.onmouseup = mouseup;
        cell.onmousemove = mousemove;
    }
}


http://www.kler.cn/a/515795.html

相关文章:

  • 进程、线程和协程的区别
  • 【2024年 CSDN博客之星】我的2024年创作之旅:从C语言到人工智能,个人成长与突破的全景回顾
  • 前端Vue2项目使用md编辑器
  • CentOS 7乱码问题如何解决?
  • 为什么redis会开小差?Redis 频繁异常的深度剖析与解决方案
  • 微服务学习-Gateway 统一微服务入口
  • 原生toFixed的bug
  • 多版本并发控制:MVCC的作用和基本原理
  • javaweb之HTML
  • 【spring】集成JWT实现登录验证
  • Grafana系列之面板接入Prometheus Alertmanager
  • C#树图显示目录下所有文件以及文件大小
  • 深入探究 YOLOv5:从优势到模型导出全方位解析
  • 简识JVM的栈帧优化共享技术
  • SQL-leetcode—1174. 即时食物配送 II
  • 【设计模式-行为型】观察者模式
  • Git报错:refusing to merge unrelated histories
  • 基于ESP32-IDF驱动GPIO输出控制LED
  • ChatGPT大模型极简应用开发-CH2-深入了解 GPT-4 和 ChatGPT 的 API
  • linux CentOS 创建账号,并设置权限
  • PL/SQL语言的图形用户界面
  • Haskell语言的正则表达式
  • 利用预训练检查点进行序列生成任务
  • 如何实现网页不用刷新也能更新
  • 微前端qiankun的部署
  • Java中Set集合的面试试题及答案解析