软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：table,宽度

<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>

技术文章快速查找

Firefox完全兼容Javascript脚本方法

用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。

JQuery的html(data)方法与<script>脚本块的解决方法

Js 本页面传值实现代码

javascript基础知识大全便于大家学习，也便于我自己查看

深入理解javascript学习笔记（一）编写高质量代码

用Mootools获得操作索引的两种方法分享

滑动门式菜单实现代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

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

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