JS拖动改变表格列宽的实现
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
用js实现可以拖动列宽的表格,在ie下完全兼容,但在火狐和其它浏览器表现不佳,根据你的需求了,高手的话自己修改一下吧。
[code] <script language="javascript"> function MouseDownToResize(obj){ setTableLayoutToFixed(); obj.mouseDownX=event.clientX; obj.pareneTdW=obj.parentElement.offsetWidth; obj.pareneTableW=theObjTable.offsetWidth; obj.setCapture(); } function MouseMoveToResize(obj){ if(!obj.mouseDownX) return false; var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; if(newWidth>10) { var theObjTable = document.getElementById("theObjTable"); obj.parentElement.style.width = newWidth; theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; } } function MouseUpToResize(obj){ obj.releaseCapture(); obj.mouseDownX=0; } function setTableLayoutToFixed() { var theObjTable = document.getElementById("theObjTable"); if(theObjTable.style.tableLayout=='fixed') return; var headerTr=theObjTable.rows[0]; for(var i=0;i headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; } for(var i=0;i headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; } theObjTable.style.tableLayout='fixed'; } </script> <script language="javascript"></script>
<script language="javascript"></script> [/code] 该文章在 2010/3/12 23:19:40 编辑过 |
关键字查询
相关文章
正在查询... |