原生javascript实现拖拽改变table表格行高（html）

最近在做一个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，然后用cellsheaderRows[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下载地址

原生javascript实现拖拽改变table表格行高（html）相关推荐

html表格宽度拖拽,原生js实现拖拽改变 table表格列宽
table 员工编号试用时间转正时间性别姓名拼音生日时间民族身高 vh20180421 2018-3-13 2018-6-13 1 LDH 1988-3-13 汉族 178 vh2018 ...
LabVIEW 调整Table表格行高列宽的方法与例程
LabVIEW 调整Table表格行高列宽的方法与例程在 VI 运行时,可以用两种不同的方式更改表中的列宽度.首先,可以用鼠标更改它们:其次,可以通过属性节点编程更改它们. 手部更列表的宽度只有在 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
简单的进度条拖动效果及拖拽改变层大小
业务需求价格区间的进度条拖动初级demo 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&qu ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
threejs进阶，管道几何体高级应用，geometry几何体应用，可拖拽改变形状的管道
threejs进阶,管道几何体高级应用,geometry几何体应用,可拖拽改变形状的管道一.threejs是什么? 二.geometry几何体使用步骤 1.引入库 2.如果使用谷歌浏览器打不开报错, ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...

原生javascript实现拖拽改变table表格行高（html）

原生javascript实现拖拽改变table表格行高（html）相关推荐

最新文章

热门文章