鼠标拖动动态改变表格的宽度的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"></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>  <div id="my"></div> <div id="my2"></div> </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> <script language="javascript"></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文件

您可能感兴趣的文章:

table
宽度

Typescript使用修饰器混合方法到类的实例
这篇文章主要介绍了Typescript使用修饰器混合方法到类的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
JS设计模式之惰性模式（二）
这篇文章主要为大家详细介绍了JS设计模式之惰性模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
js html5获取input焦点的输入框并赋值实例
这篇文章主要为大家介绍了js html5获取input焦点的输入框并赋值实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
Javascript实现获取及设置光标位置的方法
这篇文章主要介绍了Javascript实现获取及设置光标位置的方法,涉及javascript针对页面光标位置的相关操作技巧,具有良好的兼容性,非常简单实用,需要的朋友可以参考下
2015-07-07
详解JavaScript中new操作符的解析和实现
这篇文章主要介绍了JavaScript中new操作符的解析和实现，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-09-09
JS中的oninput和onchange事件的区别及如何正确使用
在JavaScript中,oninput和onchange事件是用于处理用户输入的常见事件,本文将介绍oninput和onchange事件的区别,以及如何在实际开发中正确使用它们,感兴趣的朋友跟随小编一起看看吧
2023-10-10
JavaScript实现简单的数字倒计时
这里给大家总结了一些比较常用的javascript实现的倒计时功能的代码，非常的实用，有需要的小伙伴可以参考下。
2015-05-05
csdn 论坛技术区平均给分功能
看论坛里技术区没有平均给分的功能，感觉散分很不方便，就写了一个：IE8,FF3.5下测试ok
2009-11-11
微信小程序实现文字滚动
这篇文章主要为大家详细介绍了微信小程序实现文字滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
JavaScript开发的七个实用小技巧(很有用)
日常开发中,我们经常需要编写大量的js代码,下面这篇文章主要给大家介绍了关于JavaScript开发的七个实用小技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04