当前位置：首页 > 资讯 > 技术文档

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

时间：2020-09-08 21:19 编辑：来源：阅读：
扫一扫，手机访问

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

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"> 
 
 
 
<table border="1" bordercolordark="#efefef" bordercolorlight="#7b7b7b" cellpadding="0" cellspacing="0" class="bg" id="theObjTable" width="60%"> 
<tr> 
<td class="num">序号</td> 
<td class="tit"> 
<span class="resizeDivClass" id="drag">[img]http://www.1sucai.cn/article/images/box1.gif[/img]
</span> 
公司名称 
</td> 
<td class="tit"> 
<span class="resizeDivClass" id="drag2">[img]http://www.1sucai.cn/article/images/box1.gif[/img]
</span> 
订单客户 
</td> 
<td class="tit"> 
<span class="resizeDivClass" id="drag3">[img]http://www.1sucai.cn/article/images/box1.gif[/img]
</span> 
部门 
</td> 
<td class="tit"> 
<span class="resizeDivClass" id="drag4">[img]http://www.1sucai.cn/article/images/box1.gif[/img]
</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>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

上面代码是本人从网上搜集的，并非本人编写，特此声明。下面附上两个是IE only的，大家都可以参考下。

拖动列宽的表格 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"> 
 
 
 
<table border="1" bordercolordark="#efefef" bordercolorlight="#7b7b7b" cellspacing="0" class="bg" id="theObjTable" width="100%"> 
<tr> 
<td class="num">序号</td> 
<td class="tit" width="100px"> 
<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>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

下面是通过htc来实现的。

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

全部评论(0)

上一篇：简介alert()与console.log()的不同
下一篇：JSONP和批量操作功能的实现方法

资讯排行榜
更多>>

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

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