js 鼠标拖动自由调节表格的列宽

来源：互联网发布：淘宝金钻买家有什么用编辑：程序博客网时间：2024/04/28 16:12

鼠标拖动调整列宽的js程序，大体的要求是控制table的总宽度不变，拖动表格列的时候只改变当前列和它之后相邻列的宽度，其他的表格列不受影响。

实现思路：每一列中用一个span来响应拖动事件，在onmousemove事件中计算当前列和其后相邻列的宽度变化并赋予每列新的宽度值。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><style type="text/css">table{border-left:1px solid black;width:100%;border-top:1px solid black}td{border-bottom:1px solid black;border-right:1px solid black;white-space:nowrap;/*不换行*/overflow:hidden;text-overflow:ellipsis;/*文本超出部分用"..."代替*/}.resizeDivClass{PADDING-RIGHT: 0px;MARGIN-RIGHT: 0px; float:right;cursor:e-resize;HEIGHT: 100%; width:2px;}</style><script language="javascript" type="text/javascript">var dragobj=null;    //保存用户选择的"span"//handle onmousedown event function MouseDownToResize(event,obj){obj.focus();document.body.style.cursor = "e-resize";obj.parentTdW=obj.parentNode.offsetWidth;var sibling = obj.parentNode.nextSibling;obj.siblingW = sibling.offsetWidth;obj.totalWidth = obj.siblingW + obj.parentTdW;    if(obj.parentElement)        obj.mouseDownX=event.clientX;    else        obj.mouseDownX=event.pageX;    dragobj=obj;}//handle onmousemove eventsfunction MouseMoveToResize(event){var e = event||window.event;if(dragobj==null)        return false;    if(!dragobj.mouseDownX)        return false;    newWidth=dragobj.parentTdW+e.clientX-dragobj.mouseDownX;var sibling = dragobj.parentNode.nextSibling;//if width of column does not exceed minimum width 80, set column widthif(newWidth>80 && (dragobj.totalWidth-newWidth)>80)    {        dragobj.parentNode.style.width = dragobj.parentTdW+e.clientX-dragobj.mouseDownX;sibling.style.width = dragobj.siblingW-e.clientX+dragobj.mouseDownX;    }}// handle onmouseup eventsfunction MouseUpToResize(event){if(dragobj==null){        return false;    }    dragobj.mouseDownX=0;document.body.style.cursor = "";    dragobj=null;}//page initializationfunction pageInit(){document.onmousemove = MouseMoveToResize;document.onmouseup = MouseUpToResize;document.body.ondrag = function () {return false;};    document.body.onselectstart = function () { return false; };}</script></head><body onload="pageInit();"><div style="width:1000" ><table style="table-layout:fixed"><thead><tr bgcolor="#CCFFFF"><th valign="top" id="td1"><span class="resizeDivClass" onmousedown="MouseDownToResize(event,this);"onmouseup="MouseUpToResize(event);" style="width: 3px"></span>name</th><th valign="top" id="td2"><span class="resizeDivClass" onmousedown="MouseDownToResize(event,this);" onmouseup="MouseUpToResize(event,this);" style="width: 3px"></span>id</th><th valign="top">address</th></tr></thead><tbody id="body"><tr><td>zhangsan</td><td>111111111111</td><td>aaaaaaaaaaaaaaaaaaaaaa</td></tr><tr><td>lisi</td><td>2222222222222222222222222</td><td>bbbbbbb</td></tr><tr><td>wangwu</td><td>33333333333333333</td><td>cccccc</td></tr><tr><td>qianliu</td><td>44444444444</td><td>ddddddddddddddddddddddddddd</td></tr></tbody></table></div></body></html>