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

187 阅读 0 评论 124 点赞

我是靠谱客的博主凶狠小蘑菇，最近开发中收集的这篇文章主要介绍鼠标拖动动态改变表格的宽度的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> 
 
<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="http://www.uoften.com/article/images/box1.gif" src="http://www.uoften.com/article/images/box1.gif" width="3" height="18"></span> 
公司名称 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag2"><img src="http://www.uoften.com/article/images/box1.gif" src="http://www.uoften.com/article/images/box1.gif" width="3" height="18"></span> 
订单客户 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag3"><img src="http://www.uoften.com/article/images/box1.gif" src="http://www.uoften.com/article/images/box1.gif" width="3" height="18"></span> 
部门 
</td> 
<td class="tit" > 
<span class="resizeDivClass" id="drag4"><img src="http://www.uoften.com/article/images/box1.gif" src="http://www.uoften.com/article/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%">uoften.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> 
 
<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> 
 
</body> 
</html>

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

下面是通过htc来实现的。

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

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