最近在做一个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下载地址
