鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox .html titletable拖动(兼容Firefox 3.5/IE6)，固
鼠标拖动动态改变表格的宽度的js脚本 兼容ie/firefox .
<html> <title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"><!-- .bg { font-size:12px; color:#000000; table-layout:fixed;//这个属性可以隐藏文字 } .bg td{ font-size:12px; color:#000000; text-align:left; line-height:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; color:#000; height:17px; text-align:center; line-height:15px; } .bg td.num{ background-color:#e2e2e2; color:#000; text-align:right; line-height:15px; height:22px; width:30px; } .resizeDivClass{ text-align:right; width:3px; margin:0px 0 0px 0; background:#fff; border:0px; float:right; cursor:e-resize; } --></style> <script type="text/javascript"><!-- window.onload=function(){ drag(document.getElementById('drag')); drag(document.getElementById('drag2')); drag(document.getElementById('drag3')); drag(document.getElementById('drag4')); }; function drag(o,r){ o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度，兼容IE6和Firefox*/{ if(window.ActiveXObject){ return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth; }else{ return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth)-parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding)*2-2; } } o.p_p_p_sw=function(index,w)/*设置所有行的第index个单元格为w，在IE下可只设第一行*/{ for(var i=0;i<o.parentNode.parentNode.parentNode.parentNode.rows.length;i++) { o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width=w;} } var out=document.getElementById('my'); o.firstChild.onmousedown=function(){return false;}; o.onmousedown=function(a){ var d=document;if(!a)a=window.event; var lastX=a.clientX; var watch_dog=o.p_p_c_gw(0)+o.p_p_c_gw(1);//有时候拖拽过快表格会变大，至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大，if(o.setCapture) o.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); // d.onmousemove=function(a){ if(!a)a=window.event; if(o.p_p_c_gw(0)+o.p_p_c_gw(1)>watch_dog){ o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0)); return; } var t=a.clientX-lastX;out.innerHTML=t; if(t>0) {//right if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex+1].style.width)-t<10)return; o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t); o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t); } else {//left if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width)+t<10)return; o.p_p_p_sw(o.parentNode.cellIndex,o.p_p_c_gw(0)+t); o.p_p_p_sw(o.parentNode.cellIndex+1,o.p_p_c_gw(1)-t); } lastX=a.clientX; }; d.onmouseup=function(){ if(o.releaseCapture) o.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=null; d.onmouseup=null; }; }; } // --></script> <body > <table width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" ><tr > <td >序号</td> <td > <span id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>公司名称 </td> <td > <span id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>订单客户 </td> <td > <span id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>部门 </td> <td > <span id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span>业务员 </td> <td > 交款方式 </td> </tr> <tr > <td >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%">jb51.net</div></td><td >广告部</td> <td >王天一</td> <td >现金</td> </tr > </table> <div id="my"></div> <div id="my2"></div> </body> </html> 下面附上两个是IE only的，大家都可以参考下。<html> <title>拖动列宽的表格</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"><!-- .bg td{ font-size:12px; text-align:left; line-height:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; height:17px; text-align:center; line-height:15px; } .bg td.num{ background-color:#e2e2e2; text-align:right; line-height:15px; width:30px; height:22px; } .resizeDivClass{ text-align:right; width:1px; margin:0px 0 0px 0; background:#fff; border:0px; float:right; cursor:e-resize; } --></style> <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.length;i++) { headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; } for(var i=0;i<headerTr.cells.length;i++) { headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; } theObjTable.style.tableLayout='fixed'; } function theObjTable(o,a,b,c){ var t=document.getElementById(o).getElementsByTagName("tr"); for(var i=0;i<t.length;i++){ t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; t[i].onclick=function(){ if(this.x!="1"){ }else{ this.x="0"; this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; } } t[i].onmouseover=function(){ if(this.x!="1")this.style.backgroundColor=c; } t[i].onmouseout=function(){ if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; } } } // --></script> <body> <table width="100%" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable"><tr> <td onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>公司名称 </td> <td onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>订单客户 </td> <td onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>部门 </td> <td onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>业务员 </td> <td onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>交款方式 </td> </tr> <tr> <td >1</td> <td >中国电信</td> <td >订单客户名称</td> <td >广告部</td> <td >王天一</td> <td >现金</td> </tr> <tr> <td >2</td> <td >中国移动</td> <td >订单客户名称</td> <td >营销部</td> <td >李小红</td> <td >信用卡</td> </tr> <tr> <td >3</td> <td >中国联通</td> <td >订单客户名称</td> <td >市场部</td> <td >王老二</td> <td >银行卡</td> </tr> </table> <script language="javascript"><!-- //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); theObjTable("theObjTable","#c0c0c0","#fff","#a3a2a2"); // --></script> </body> </html> 下面是通过htc来实现的。<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>可通过拖动改变列宽的表格</title> </head> <body> <div style="height:500"> <TABLE border=1 cellspacing=0 cellpadding=0 style="behavior:url(http://img.jb51.net/images/grid.htc);"> <TR> <TD> title1脚本之家</TD> <TD> title2jb51.net</TD> <TD> title3</TD> <TD> title4</TD> </TR> <TR> <TD> content11</TD> <TD> content12</TD> <TD> content13</TD> <TD> content14</TD> </TR> <TR> <TD> content21</TD> <TD> content22</TD> <TD> content23</TD> <TD> content24</TD> </TR> <TR> <TD> content31</TD> <TD> content32</TD> <TD> content33</TD> <TD> content34</TD> </TR> </TABLE> </div> </body> </html>