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 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
js实现交通灯效果
Jan 13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
js实现表格数据搜索
2020/08/09 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python创建文件备份的脚本
2018/09/11 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
关于python多重赋值的小问题
2019/04/17 Python
pycharm安装及如何导入numpy
2020/04/03 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
详解python tcp编程
2020/08/24 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
优秀生推荐信范文
2013/11/28 职场文书
不假外出检讨书
2014/01/27 职场文书
新春寄语大全
2014/04/09 职场文书
大四毕业生自荐书
2014/07/05 职场文书
工程款申请报告
2015/05/15 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript