您的当前位置：首页鼠标拖动动态改变表格的宽度的js脚本兼容ie/firefox_javascript技巧

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

来源：喜迪情感

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> 
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 class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" > 
<tr > 
<td class="num" >序号</td> 
<td class="tit" > 
 
公司名称 
</td> 
<td class="tit" > 
 
订单客户 
</td> 
<td class="tit" > 
 
部门 
</td> 
<td class="tit" > 
 
业务员 
</td> 
<td class="tit" >

交款方式 
</td> 
</tr> 
<tr > 
<td class="num" >1</td> 
<td> 脚本之家</td> 
<td >jb51.net</td> 
<td >广告部</td> 
<td >王天一</td> 
<td >现金</td> 
</tr > 
</table>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
上面代码是本人从网上搜集的，并非本人编写，特此声明。

下面附上两个是IE only的，大家都可以参考下。
<html> <title>拖动列宽的表格</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"></style> 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%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable"> <tr> <td class="num">序号</td> <td width="100px" class="tit"> 公司名称 </td> <td class="tit"> 订单客户 </td> <td class="tit"> 部门 </td> <td class="tit"> 业务员 </td> <td class="tit"> 交款方式 </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> </ script> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
下面是通过htc来实现的。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>可通过拖动改变列宽的表格</title> </head> <body> <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> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
注意上面的代码，需要下载htc文件