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

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度
</p> <p><title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title> </p> <p><!-- .bg { font-size:12px; color:#000000; table-layout:fixed;//这个属性可以隐藏文字 } .bg td{ font-size:12px; color:#000000; text-align:left; line-height:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; color:#000; height:17px; text-align:center; line-height:15px; } .bg td.num{ background-color:#e2e2e2; color:#000; text-align:right; line-height:15px; height:22px; width:30px; } .resizeDivClass{ text-align:right; width:3px; margin:0px 0 0px 0; background:#fff; border:0px; float:right; cursor:e-resize; } --> </p> <table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" id="theObjTable"> <tr> <td class="num">序号</td> <td class="tit"> <span class="resizeDivClass" id="drag"></span><br /> 公司名称 </td> <td class="tit"> <span class="resizeDivClass" id="drag2"></span><br /> 订单客户 </td> <td class="tit"> <span class="resizeDivClass" id="drag3"></span><br /> 部门 </td> <td class="tit"> <span class="resizeDivClass" id="drag4"></span><br /> 业务员 </td> <td class="tit"> <p>交款方式 </td> </tr> <tr> <td class="num">1</td> <td> 北冥有鱼</td> <td>jb51.net</td> <td>广告部</td> <td>王天一</td> <td>现金</td> </tr> </table> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上面代码是本人从网上搜集的，并非本人编写，特此声明。

下面附上两个是IE only的，大家都可以参考下。
</p> <p><title>拖动列宽的表格</title> </p> <p><!-- .bg td{ font-size:12px; text-align:left; line-height:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; height:17px; text-align:center; line-height:15px; } .bg td.num{ background-color:#e2e2e2; text-align:right; line-height:15px; width:30px; height:22px; } .resizeDivClass{ text-align:right; width:1px; margin:0px 0 0px 0; background:#fff; border:0px; float:right; cursor:e-resize; } --> </p> <table width="100%" class="bg" border="1" cellspacing="0" id="theObjTable"> <tr> <td class="num">序号</td> <td width="100px" class="tit"> <span class="resizeDivClass"></span><br /> 公司名称 </td> <td class="tit"> <span class="resizeDivClass"></span><br /> 订单客户 </td> <td class="tit"> <span class="resizeDivClass"></span><br /> 部门 </td> <td class="tit"> <span class="resizeDivClass"></span><br /> 业务员 </td> <td class="tit"> <span class="resizeDivClass"></span><br /> 交款方式 </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> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
下面是通过htc来实现的。

</p> <p><title>可通过拖动改变列宽的表格</title> </p> <p><TABLE border="1" cellspacing="0" cellpadding="0"><br /> <TR><br /> <TD> title1北冥有鱼</TD><br /> <TD> title2jb51.net</TD><br /> <TD> title3</TD><br /> <TD> title4</TD><br /> </TR><br /> <TR><br /> <TD> content11</TD><br /> <TD> content12</TD><br /> <TD> content13</TD><br /> <TD> content14</TD><br /> </TR><br /> <TR><br /> <TD> content21</TD><br /> <TD> content22</TD><br /> <TD> content23</TD><br /> <TD> content24</TD><br /> </TR><br /> <TR><br /> <TD> content31</TD><br /> <TD> content32</TD><br /> <TD> content33</TD><br /> <TD> content34</TD><br /> </TR><br /> </TABLE> </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
注意上面的代码，需要下载htc文件

您可能感兴趣的文章:

• js实现悬浮窗效果(支持拖动)
• js实现div在页面拖动效果
• js 鼠标拖动对象 可让任何div实现拖动效果
• js实现可拖动DIV的方法
• 比较精简的Javascript拖动效果函数代码
• javascript 事件处理、鼠标拖动效果实现方法详解
• 利用javascript移动div层-javascript 拖动层
• javascript div 弹出可拖动窗口
• 使用ExtJS技术实现的拖动树结点
• js实现鼠标拖动功能