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 EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
JS作用域深度解析
Dec 29 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
Vue声明式渲染详解
May 17 Javascript
vue视图不更新情况详解
May 16 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中上传大体积文件时需要的设置
2006/10/09 PHP
php 魔术函数使用说明
2010/02/21 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
python生成日历实例解析
2014/08/21 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python opencv之SURF算法示例
2018/02/24 Python
python 对象和json互相转换方法
2018/03/22 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python文件写入write()的操作
2019/05/14 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python 消费 kafka 数据教程
2019/12/21 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
文秘专业个人求职信
2013/12/22 职场文书
结婚典礼证婚词
2014/01/11 职场文书
医院实习介绍信
2014/01/12 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
同意迁入证明模板
2014/10/26 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
微信小程序实现聊天室功能
2021/06/14 Javascript
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Python中的变量与常量
2021/11/11 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android