zoukankan      html  css  js  c++  java
  • table拖动列宽

    var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 
    var table = document.getElementById("content");
    for (j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].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[j].onmouseup = function() {
            //结束宽度调整
            if (tTD == undefined) tTD = this;
            tTD.mouseDown = false;
            tTD.style.cursor = 'default';
        };
        table.rows[0].cells[j].onmousemove = function() {
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize';
            else this.style.cursor = 'default';
            //取出暂存的Table Cell
            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';
                //调整该列中的每个Cell
                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;
                }
            }
        };
    }
    table.onmouseup=function(){
        //结束宽度调整
        if (tTD == undefined) tTD = this;
        tTD.mouseDown = false;
        tTD.style.cursor = 'default';
    };
  • 相关阅读:
    centos 7 有点意思
    Thinkphp中路由Url获取的使用方法
    smarty中的母板极制_extends和block标签
    linux下php多版本的并存实现
    centos nginx,php添加到Service
    CI_Autocomplete_2.0.php轻松实现Bebeans与Codeigniter的智能提示
    php中的性能挖掘
    tar命令,转来等用
    Smarty插件简单开发
    iOS 7用户界面过渡指南
  • 原文地址:https://www.cnblogs.com/webczw/p/4224146.html
Copyright © 2011-2022 走看看