首页 > 网络编程 > JavaScript > javascript技巧 > 修改table的宽度

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

2009-12-02 00:38:09 作者：

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度在网上搜索了好久，找到的都是只能在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> 
<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 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" src="images/box1.gif" width="3" height="18"></span> 
公司名称 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 
订单客户 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 
部门 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag4"><img src="images/box1.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%">jb51.net</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> 
<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%" 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> 
<script language="javascript"></script> 
</body> 
</html>

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

下面是通过htc来实现的。

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

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

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

您可能感兴趣的文章:

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