干货来了，如何通过javascript或者jquery实现改变表格宽度或者行高的功能？今天就把这个功能代码分享给大家，绝对原创哦，代码少而且易懂。先看效果图：
html结构：
<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>table</title><scriptsrc="./jquery-1.12.4.min.js"></script><style>tableth{cursor:col-resize;background:rgb(204,215,255);}</style></head><body><tableid="tb1"cellspacing="0"cellpadding="2"width="100%"border="1"><tbody><tr><th>编号</th><th>名称</th><th>英文名</th><th>上线时间</th><th>主要功能</th><th>备注</th><th>网址</th><th>大小</th></tr><tr><td>01</td><td>乐之者java</td><td>lzzjava</td><td>-08-06</td><td>java相关的原创视频与文章</td><td>网站</td><td>/</td><td>-</td></tr><tr><td>02</td><td>乐之者内容管理系统</td><td>lzzcms</td><td>-08-06</td><td>cms类软件</td><td>软件</td><td>-</td><td>几十兆吧</td></tr><tr><td>01</td><td>乐之者java</td><td>lzzjava</td><td>-08-06</td><td>java相关的原创视频与文章</td><td>网站</td><td>/</td><td>-</td></tr><tr><td>02</td><td>乐之者内容管理系统</td><td>lzzcms</td><td>-08-06</td><td>cms类软件</td><td>软件</td><td>-</td><td>几十兆吧</td></tr></tbody></table></body></html>
JavaScript与jquery代码：
<script>//js实现改变宽度varresizeTd;vartable=document.getElementById("tb1");for(j=0;j<table.rows[0].cells.length;j++){table.rows[0].cells[j].onmousedown=function(e){if(this.offsetWidth-e.offsetX<10){resizeTd=this;//保存下要操作的列resizeTd.initClientX=e.clientX;//保存下鼠标按下时鼠标相对该单元格x方向的偏移resizeTd.initWidth=resizeTd.offsetWidth;//保存下该单元格的宽度}};table.rows[0].cells[j].onmousemove=function(){//更改鼠标样式if(this.offsetWidth-event.offsetX<10){this.style.cursor='col-resize';}else{this.style.cursor='default';}};}document.onmouseup=function(){//不需要写在上边的for循环里面resizeTd=null;};document.onmousemove=function(evt){if(resizeTd){if(resizeTd.initWidth+(evt.clientX-resizeTd.initClientX)>0){resizeTd.width=resizeTd.initWidth+(evt.clientX-resizeTd.initClientX);}}};//jquery实现改变高度varresizeTr;$("tr").mousedown(function(e){//鼠标按下时初始化当前要操作的行if($(this).outerHeight()-e.offsetY<10){resizeTr=this;resizeTr.initClientY=e.clientY;resizeTr.initHeight=$(this).outerHeight();}});$(document).mouseup(function(){//鼠标抬起时置空当前操作的行resizeTr=null;});$("tr").mousemove(function(evt){//鼠标在接近行底部时改变形状if($(this).outerHeight()-evt.offsetY<10){$(this).css("cursor","row-resize");}else{$(this).css("cursor","default");}});//如果鼠标移动事件绑定在tr上，当移动过快时会导致tr的高度变化跟不上鼠标的移动变化$(document).mousemove(function(evt){if(resizeTr){if(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY)>0){$(resizeTr).outerHeight(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY));}}});</script>
值得指出的几个地方需要注意下：
分清楚几个概念,即事件对象event的x、clientX、pageX、screenX、offsetX(当然y,clientY,pageY,screenY,offsetY类似)以及HtmlElement对象的offsetWidth、offsetHeight、offsetLeft、offsetTop、scrollWidth、scrollHeight、scrollLeft、scrollTop是理解本程序的关键。
mousemove事件在改变宽度或高度的时候不要绑定在tr元素上，要绑定在document上，不然当鼠标移动过快时，宽度或者高度会跟不上鼠标移动的速度，最终不会发生变化。
