鼠标拖动动态改变表格的宽度的js脚本兼容ie/firefox

　　table拖动(兼容Firefox 3.5/IE6)，固定表格宽度

<html> 
<title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"></style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0Awindow.onload%3Dfunction()%7B%20%0D%0Adrag(document.getElementById('drag'))%3B%20%0D%0Adrag(document.getElementById('drag2'))%3B%20%0D%0Adrag(document.getElementById('drag3'))%3B%20%0D%0Adrag(document.getElementById('drag4'))%3B%20%0D%0A%7D%3B%20%0D%0Afunction%20drag(o%2Cr)%7B%20%0D%0Ao.p_p_c_gw%3Dfunction(index)%2F*%E5%8F%96%E5%BE%97o.parentNode.parentNode.cells%E7%9A%84%E5%AE%BD%E5%BA%A6%EF%BC%8C%E5%85%BC%E5%AE%B9IE6%E5%92%8CFirefox*%2F%7B%20%0D%0Aif(window.ActiveXObject)%7B%20%0D%0Areturn%20o.parentNode.parentNode.cells%5Bo.parentNode.cellIndex%2Bindex%5D.offsetWidth%3B%20%0D%0A%7Delse%7B%20%0D%0Areturn%20parseInt(o.parentNode.parentNode.cells%5Bo.parentNode.cellIndex%2Bindex%5D.offsetWidth)-%20%0D%0AparseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Ao.p_p_p_sw%3Dfunction(index%2Cw)%2F*%E8%AE%BE%E7%BD%AE%E6%89%80%E6%9C%89%E8%A1%8C%E7%9A%84%E7%AC%ACindex%E4%B8%AA%E5%8D%95%E5%85%83%E6%A0%BC%E4%B8%BAw%EF%BC%8C%E5%9C%A8IE%E4%B8%8B%E5%8F%AF%E5%8F%AA%E8%AE%BE%E7%AC%AC%E4%B8%80%E8%A1%8C*%2F%7B%20%0D%0Afor(var%20i%3D0%3Bi%3Co.parentNode.parentNode.parentNode.parentNode.rows.length%3Bi%2B%2B)%20%7B%20%0D%0Ao.parentNode.parentNode.parentNode.parentNode.rows%5Bi%5D.cells%5Bindex%5D.style.width%3Dw%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20out%3Ddocument.getElementById('my')%3B%20%0D%0A%0D%0Ao.firstChild.onmousedown%3Dfunction()%7Breturn%20false%3B%7D%3B%20%0D%0Ao.onmousedown%3Dfunction(a)%7B%20%0D%0Avar%20d%3Ddocument%3Bif(!a)a%3Dwindow.event%3B%20%0D%0Avar%20lastX%3Da.clientX%3B%20%0D%0Avar%20watch_dog%3Do.p_p_c_gw(0)%2Bo.p_p_c_gw(1)%3B%2F%2F%E6%9C%89%E6%97%B6%E5%80%99%E6%8B%96%E6%8B%BD%E8%BF%87%E5%BF%AB%E8%A1%A8%E6%A0%BC%E4%BC%9A%E5%8F%98%E5%A4%A7%EF%BC%8C%E8%87%B3%E4%BA%8E%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E8%BF%99%E6%A0%B7%E6%88%91%E4%B9%9F%E4%B8%8D%E6%B8%85%E6%A5%9A%E3%80%82watch_dog%E6%98%AF%E4%B8%BA%E4%BA%86%E4%BF%9D%E8%AF%81%E8%A1%A8%E6%A0%BC%E4%B8%8D%E4%BC%9A%E5%8F%98%E5%A4%A7%EF%BC%8C%20%0D%0Aif(o.setCapture)%20%0D%0Ao.setCapture()%3B%20%0D%0Aelse%20if(window.captureEvents)%20%0D%0Awindow.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0A%2F%2F%20%0D%0Ad.onmousemove%3Dfunction(a)%7B%20%0D%0Aif(!a)a%3Dwindow.event%3B%20%0D%0Aif(o.p_p_c_gw(0)%2Bo.p_p_c_gw(1)%3Ewatch_dog)%7B%20%0D%0Ao.p_p_p_sw(o.parentNode.cellIndex%2B1%2Cwatch_dog-o.p_p_c_gw(0))%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Avar%20t%3Da.clientX-lastX%3Bout.innerHTML%3Dt%3B%20%0D%0Aif(t%3E0)%20%7B%2F%2Fright%20%0D%0Aif(parseInt(o.parentNode.parentNode.cells%5Bo.parentNode.cellIndex%2B1%5D.style.width)-t%3C10)%20%0D%0Areturn%3B%20%0D%0Ao.p_p_p_sw(o.parentNode.cellIndex%2Co.p_p_c_gw(0)%2Bt)%3B%20%0D%0Ao.p_p_p_sw(o.parentNode.cellIndex%2B1%2Co.p_p_c_gw(1)-t)%3B%20%0D%0A%7D%20else%20%7B%2F%2Fleft%20%0D%0Aif(parseInt(o.parentNode.parentNode.cells%5Bo.parentNode.cellIndex%5D.style.width)%2Bt%3C10)%20%0D%0Areturn%3B%20%0D%0Ao.p_p_p_sw(o.parentNode.cellIndex%2Co.p_p_c_gw(0)%2Bt)%3B%20%0D%0Ao.p_p_p_sw(o.parentNode.cellIndex%2B1%2Co.p_p_c_gw(1)-t)%3B%20%0D%0A%7D%20%0D%0AlastX%3Da.clientX%3B%20%0D%0A%7D%3B%20%0D%0Ad.onmouseup%3Dfunction()%7B%20%0D%0Aif(o.releaseCapture)%20%0D%0Ao.releaseCapture()%3B%20%0D%0Aelse%20if(window.captureEvents)%20%0D%0Awindow.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0Ad.onmousemove%3Dnull%3B%20%0D%0Ad.onmouseup%3Dnull%3B%20%0D%0A%7D%3B%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
<body > 
<table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" > 
<tr > 
<td class="num" >序号</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" src="images/box1.gif" width="3" height="18"></span> 
公司名称 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag2"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" src="images/box1.gif" width="3" height="18"></span> 
订单客户 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag3"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" src="images/box1.gif" width="3" height="18"></span> 
部门 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag4"><img src="images/box1.gif" _ewebeditor_ta_src="images%2Fbox1.gif" src="images/box1.gif" width="3" height="18"></span> 
业务员 
</td> 
<td class="tit" >

交款方式 
</td> 
</tr> 
<tr > 
<td class="num" >1</td> 
<td> <div style="white-space:nowrap;overflow:hidden;width:100%;">管理资源吧</div></td> 
<td ><div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">glzy8.com</div></td> 
<td >广告部</td> 
<td >王天一</td> 
<td >现金</td> 
</tr > 
</table>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　上面代码是本人从网上搜集的，并非本人编写，特此声明。

　　下面附上两个是IE only的，大家都可以参考下。

<html> 
<title>拖动列宽的表格</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"></style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%3C!--%20%0D%0Afunction%20MouseDownToResize(obj)%7B%20%0D%0A%20%20%20%20setTableLayoutToFixed()%3B%20%0D%0A%20%20%20%20obj.mouseDownX%3Devent.clientX%3B%20%0D%0A%20%20%20%20obj.pareneTdW%3Dobj.parentElement.offsetWidth%3B%20%0D%0A%20%20%20%20obj.pareneTableW%3DtheObjTable.offsetWidth%3B%20%0D%0A%20%20%20%20obj.setCapture()%3B%20%0D%0A%7D%20%0D%0Afunction%20MouseMoveToResize(obj)%7B%20%0D%0Aif(!obj.mouseDownX)%20return%20false%3B%20%0D%0Avar%20newWidth%3Dobj.pareneTdW*1%2Bevent.clientX*1-obj.mouseDownX%3B%20%0D%0Aif(newWidth%3E10)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20theObjTable%20%3D%20document.getElementById(%22theObjTable%22)%3B%20%0D%0A%20%20%20%20obj.parentElement.style.width%20%3D%20newWidth%3B%20%0D%0A%20%20%20%20theObjTable.style.width%3Dobj.pareneTdW*1%2Bevent.clientX*1-obj.mouseDownX%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20MouseUpToResize(obj)%7B%20%0D%0A%20%20%20%20obj.releaseCapture()%3B%20%0D%0A%20%20%20%20obj.mouseDownX%3D0%3B%20%0D%0A%7D%20%0D%0Afunction%20setTableLayoutToFixed()%20%0D%0A%7B%20%0D%0Avar%20theObjTable%20%3D%20document.getElementById(%22theObjTable%22)%3B%20%0D%0Aif(theObjTable.style.tableLayout%3D%3D'fixed')%20return%3B%20%0D%0Avar%20headerTr%3DtheObjTable.rows%5B0%5D%3B%20%0D%0Afor(var%20i%3D0%3Bi%3CheaderTr.cells.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0AheaderTr.cells%5Bi%5D.styleOffsetWidth%3DheaderTr.cells%5Bi%5D.offsetWidth%3B%20%0D%0A%7D%20%0D%0A%0D%0Afor(var%20i%3D0%3Bi%3CheaderTr.cells.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0AheaderTr.cells%5Bi%5D.style.width%3DheaderTr.cells%5Bi%5D.styleOffsetWidth%3B%20%0D%0A%7D%20%0D%0AtheObjTable.style.tableLayout%3D'fixed'%3B%20%0D%0A%7D%20%0D%0Afunction%20theObjTable(o%2Ca%2Cb%2Cc)%7B%20%0D%0A%20%20%20%20var%20t%3Ddocument.getElementById(o).getElementsByTagName(%22tr%22)%3B%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3Ct.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20t%5Bi%5D.style.backgroundColor%3D(t%5Bi%5D.sectionRowIndex%252%3D%3D0)%3Fa%3Ab%3B%20%0D%0A%20%20%20%20%20%20%20%20t%5Bi%5D.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(this.x!%3D%221%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.x%3D%220%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.backgroundColor%3D(this.sectionRowIndex%252%3D%3D0)%3Fa%3Ab%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20t%5Bi%5D.onmouseover%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(this.x!%3D%221%22)this.style.backgroundColor%3Dc%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20t%5Bi%5D.onmouseout%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(this.x!%3D%221%22)this.style.backgroundColor%3D(this.sectionRowIndex%252%3D%3D0)%3Fa%3Ab%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
<body> 
<table width="100%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable"> 
<tr> 
<td class="num">序号</td> 
<td width="100px" class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
公司名称 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
订单客户 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
部门 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
业务员 
</td> 
<td class="tit"> 
<span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 
交款方式 
</td> 
</tr> 
<tr> 
<td class="num" >1</td> 
<td >中国电信</td> 
<td >订单客户名称</td> 
<td >广告部</td> 
<td >王天一</td> 
<td >现金</td> 
</tr> 
<tr> 
<td class="num" >2</td> 
<td >中国移动</td> 
<td >订单客户名称</td> 
<td >营销部</td> 
<td >李小红</td> 
<td >信用卡</td> 
</tr> 
<tr> 
<td class="num" >3</td> 
<td >中国联通</td> 
<td >订单客户名称</td> 
<td >市场部</td> 
<td >王老二</td> 
<td >银行卡</td> 
</tr> 
</table> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%3C!--%20%0D%0A%2F%2Fsenfe(%22%E8%A1%A8%E6%A0%BC%E5%90%8D%E7%A7%B0%22%2C%22%E5%A5%87%E6%95%B0%E8%A1%8C%E8%83%8C%E6%99%AF%22%2C%22%E5%81%B6%E6%95%B0%E8%A1%8C%E8%83%8C%E6%99%AF%22%2C%22%E9%BC%A0%E6%A0%87%E7%BB%8F%E8%BF%87%E8%83%8C%E6%99%AF%22%2C%22%E7%82%B9%E5%87%BB%E5%90%8E%E8%83%8C%E6%99%AF%22)%3B%20%0D%0AtheObjTable(%22theObjTable%22%2C%22%23c0c0c0%22%2C%22%23fff%22%2C%22%23a3a2a2%22)%3B%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　下面是通过htc来实现的。

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　注意上面的代码，需要下载htc文件

教程首页更多教程

鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox

鼠标拖动动态改变表格的宽度的js脚本兼容ie/firefox