jQuery表格列宽可拖拽改变且兼容firfox


Posted in Javascript onSeptember 03, 2014

本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局。使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性。

代码如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script> 
<mce:style><!-- 
.resizeDivClass 
{ 
position:absolute; 
background-color:gray; 
width:2px; 
height:15px; 
z-index:1px; 
display: block; 
cursor:e-resize 
} 
.td1 { 
font-size: 12px; 
white-space:nowrap; 
color:#0000ff; 
} 
--></mce:style><style mce_bogus="1">.resizeDivClass 
{ 
position:absolute; 
background-color:gray; 
width:2px; 
height:15px; 
z-index:1px; 
display: block; 
cursor:e-resize 
} 
.td1 { 
font-size: 12px; 
white-space:nowrap; 
color:#0000ff; 
}</style> 
<mce:script language=javascript><!-- 
/* 
标题:扩拖拽列表格demo 1.2 
设计:卢松强 
博客:http://hi.csdn.net/andensy 
日期:2010年4月26日 
说明:修改了firfox兼容性问题,可以很好的兼容火狐浏览器 
*/ 
/* 
依赖于jQuery 
*/ 
(function($){ 
//用正则表达式判断jQuery的版本 
if (/1/.(0|1|2)/.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) { 
alert('movedTh 需要 jQuery v1.2.6 以后版本支持! 你正使用的是 v' + $.fn.jquery); 
return; 
} 
me=null; 
var ps=3; 
$.fn.movedTh=function(){ 
me=this; 
var target = null; 
var tempStr = ""; 
var i=0; 
$(me).find("tr:first").find("th").each(function(){ 
tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)" ></div>'; 
var div={}; 
$(this).html($(this).html()+tempStr); 
var offset = $(this).offset(); 
var pos=offset.left +$(this).width()+ me.offset().left-ps; 
$("#mydiv"+i).addClass("resizeDivClass"); 
$("#mydiv"+i).css("left",pos); 
$("#mydiv"+i).css("top",(offset.top+2)); 
i++; 
}); //end each 
} //end moveTh 
$.fn.mousedone={ 
movedown:function(e,obj){ 
var d=document; 
var e = window.event||e ; 
var myX = e.clientX||e.pageX; 
obj.mouseDownX=myX ; 
obj.pareneTdW=$(obj).parent().width(); //obj.parentElement.offsetWidth; 
obj.pareneTableW=me.width(); 
if(obj.setCapture){ 
obj.setCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
d.onmousemove=function(e){ 
var dragData=obj; 
var event = window.event||e ; 
if(!dragData.mouseDownX) return false; 
var newWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX; 
if(newWidth>0) 
{ 
$(obj).parent().width(newWidth); 
me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX); 
var k=0; 
me.find("tr:first").find("th").each(function(){ 
var offset = $(this).offset(); 
var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps; 
$("#mydiv"+k).css("left",pos); 
k++; 
}) //end each 
}//end if 
}; 
d.onmouseup=function(e){ 
var dragData=obj; 
if(dragData.setCapture) 
{ 
dragData.releaseCapture(); 
}else if(window.captureEvents){ 

 window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP); 
} 
dragData.mouseDownX=0; 
} 
} 
} //end mousedone 
$(window).resize(function(){ 
setTimeout(function() { 
var target = null; 
var tempStr = ""; 
var i=0; 
$(me).find("tr:first").find("th").each(function(){ 
tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)" ></div>'; 
var div={}; 
$(this).html($(this).html()+tempStr); 
var offset = $(this).offset(); 
var pos=offset.left +$(this).width()+ me.offset().left-ps; 
$("#mydiv"+i).addClass("resizeDivClass"); 
$("#mydiv"+i).css("left",pos); 
i++; 
}); //end each 
}, 10); 
}); 
})(jQuery) 
$().ready(function(){ 
$("#tab").movedTh(); 
}) 
// --></mce:script> 
</head> 
<body onload=""> 
<table cellpadding="3" id='' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" > 
<tr bgcolor=cccccc > 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th> 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th> 
</tr></table> 
<br> 
<table cellpadding="3" id='tab' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" > 
<tr bgcolor=cccccc > 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> 
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> 
</tr> 
<tr> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
</tr> 
<tr> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
</tr> 
<tr> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
</tr> 
<tr> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
<td class="td1"><nobr>改变table的列宽度</nobr></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
JSON取值前判断
Dec 23 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
Egret引擎开发指南之视觉编程
Sep 03 #Javascript
Egret引擎开发指南之发布项目
Sep 03 #Javascript
Egret引擎开发指南之运行项目
Sep 03 #Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 #Javascript
Egret引擎开发指南之编译项目
Sep 03 #Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 #Javascript
Egret引擎开发指南之创建项目
Sep 03 #Javascript
You might like
php获取远程文件内容的函数
2015/11/02 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
js中判断控件是否存在
2010/08/25 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
python实现人机五子棋
2020/03/25 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
教师党的群众路线对照检查材料
2014/09/24 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
旷工辞退通知书
2015/04/17 职场文书
管理失职检讨书范文
2015/05/05 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android