鼠标拖动动态改变表格的宽度的js脚本兼容ie/firefox_软件编程

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

发布时间：2026-01-11

点击量：

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"></span> 公司名称 </td> <td class="tit" > <span class="resizeDivClass" id="drag2"></span> 订单客户 </td> <td class="tit" > <span class="resizeDivClass" id="drag3"></span> 部门 </td> <td class="tit" > <span class="resizeDivClass" id="drag4"></span> 业务员 </td> <td class="tit" > 交款方式 </td> </tr> <tr > <td class="num" >1</td> <td> </td> <td ></td> <td >广告部</td> <td >王天一</td> <td >现金</td> </tr > </table>    <script type="text/javascript">var root_dir="";var ey_aid=469011;</script>
<script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?v=v1.7.1"></script>
</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>  <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 type="text/javascript">var root_dir="";var ey_aid=469011;</script>
<script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?v=v1.7.1"></script>
</body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
下面是通过htc来实现的。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>可通过拖动改变列宽的表格</title> <script type="text/javascript" src="/public/static/common/js/ey_global.js?v=v1.7.1"></script>
</head> <body>  <TABLE border=1 cellspacing=0 cellpadding=0 style="behavior:url(http://img./images/grid.htc);">     <TR>         <TD>&nbsp;title1</TD>         <TD>&nbsp;title2</TD>         <TD>&nbsp;title3</TD>         <TD>&nbsp;title4</TD>     </TR>     <TR>         <TD>&nbsp;content11</TD>         <TD>&nbsp;content12</TD>         <TD>&nbsp;content13</TD>         <TD>&nbsp;content14</TD>     </TR>     <TR>         <TD>&nbsp;content21</TD>         <TD>&nbsp;content22</TD>         <TD>&nbsp;content23</TD>         <TD>&nbsp;content24</TD>     </TR>     <TR>         <TD>&nbsp;content31</TD>         <TD>&nbsp;content32</TD>         <TD>&nbsp;content33</TD>         <TD>&nbsp;content34</TD>     </TR> </TABLE>  <script type="text/javascript">var root_dir="";var ey_aid=469011;</script>
<script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?v=v1.7.1"></script>
</body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
注意上面的代码，需要下载htc文件

标签：# 鼠标 # drag # 网上 # 拖拽 # 营销部 # 是为了 # 王老 # 单元格 # 来实现 # 过快 # 可通过 # 不清楚 # 大家都 # table # 中国电信 # 我也 # 中国联通 # 变大 # 公司名称 # 全选 # 拖动 # js实现移动端简易滑动表格 # javascript 拖动表格行实现代码 # 原生js实现表格循环滚动 # js实现表格拖动选项 # 宽度

上一篇：用Javascript检查Adobe PDF插件是否安装的实

下一篇：JavaScript Object的extend是一个常用的

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

发布时间：2026-01-11

点击量：

返回

4008888355

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