欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生javascript实现拖拽改变table表格行高(html)

程序员文章站 2022-06-07 22:46:37
...

最近在做一个OA的项目,里面需要大量的表格操作。有一些是使用html中的table去模拟excel的功能,等项目做完,我会把这些好玩的功能抽取出来,做一个html的excel插件。
  今天先和大家分享下怎么实时拖拽改变table的行高。拖拽改变列宽的功能网上很多,但是拖拽改变行高的我搜了很久,也没有发现可以用的。所以利用原有改变列宽的模版,自己写了一个原生javascrript改变行高的模版。
  我已经把demo源文件放在文章最下面,大家可以点击下载。
整个案例非常简单,首先是html内容。

<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Transitional//EN" "http://www.w4.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <META http-equiv=content-Type content="text/html; charset=utf-8">
    <style>
    #tbl{
        border-collapse:collapse;
    }
    #tbl td{
        height: 70px;
        width: 100px;
        border: 1px solid black;
    }

    </style>
</head>
<body>
<table id="tbl" cellspacing="1" cellpadding="5"  >
    <tr><td>标题一</td><td>标题二</td><td>标题三</td><td>标题四</td></tr>
    <tr><td >内容A</td><td >内容B</td><td >内容C</td><td >内容D</td></tr>
    <tr><td >内容A</td><td >内容B</td><td >内容C</td><td >内容D</td></tr>
    <tr><td >内容A</td><td >内容B</td><td >内容C</td><td >内容D</td></tr>
</table>
</body>
</html>

再下面是javascrript函数。

<script language="javascript">
//获取头部td集合
var tblObj = document.getElementById("tbl");
//如果不用数组,最后遍历的时候不能有【】这个来选取元素
var headerRows=new Array();
for (var i = 0; i < tblObj.rows.length; i++) {
    //只有rows这个能选,col要先选rows,然后用cells
    headerRows[i]=tblObj.rows[i].cells[0];
}

var headerTds = document.getElementById("tbl").rows[0].cells;
var mousedown = false;
var resizeable = false;
var targetTd;
var screenYStart =0;
var tdHeight = 0;
var headerHeight = 0;

for(var i = 0;i<headerRows.length;i++){
    //添加头部单元格事件
    addListener(headerRows[i],"mousedown",onmousedown);
    addListener(headerRows[i],"mousemove",onmousemove);
}

function onmousedown(event){
    if (resizeable == true){
        var evt =event||window.event;
        mousedown = true;
        screenYStart = evt.screenY;
        tdHeight = targetTd.offsetHeight;
        headerHeight = tblObj.offsetHeight;
    }
}
function onmousemove(event){
    var evt =event||window.event;
    var srcObj = getTarget(evt);
    //rowIndex是未定义!!!cellIndex是好用的。我应该获取的是tr的rowindex
    //获取偏移 这里是鼠标的偏移
    var offsetY = evt.offsetY 
    if (mousedown == true){
        var height = (tdHeight + (evt.screenY - screenYStart)) + "px";//计算后的新的宽度
        targetTd.style.height = height;
        tblObj.style.height = (headerHeight + (evt.screenY - screenYStart)) + "px";
    }else{
        if(srcObj.offsetHeight - evt.offsetY <=8){//实际改变本单元格
            targetTd=srcObj;
            resizeable = true;
            srcObj.style.cursor='row-resize';//修改光标样式
        }else if(evt.offsetY <=8){ //&& srcObj.parentNode.rowIndex > 0){//实际改变前一单元格,但是表格左边框线不可拖动
            targetTd=tblObj.rows[srcObj.parentNode.rowIndex - 1].cells[0];
            resizeable = true;
            srcObj.style.cursor='row-resize';
        }else{
            resizeable = false;
            srcObj.style.cursor='default';
        }
    }  
}

document.onmouseup = function(event){
    tartgetTd = null;
    coltargetTd= null;
    resizeable = false;
    mousedown = false;
    colmousedown = false;
    colresizeable = false;
    document.body.style.cursor='default';
}
function getTarget(evt){
    return evt.target || evt.srcElement;
}
function addListener(element,type,listener,useCapture){
    //这是两种写法,对应不同浏览器
    element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
}

</script>

demo下载地址