jQuery表格列宽可变,兼容firfox
本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>
jQuery表格列宽可变,兼容firfox的更多相关文章
- 使用jqueryUI实现自由调整表格列宽
今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实 ...
- 转!!Java JTable 根据表格内容 自动调整表格列宽
//根据表格内容 自动调整列宽http://blog.sina.com.cn/s/blog_5e54d6140100s1d3.html
- eas之添加表格列宽自动调整设置
设置表格整体宽度自动调整为所在panel的宽度 KDTable table=new KDTable(); table. setAutoResize (boolean); 注意:该功能在冻结功能启用后, ...
- java表格操作之设置表格列宽
设置所有列的宽度 /** * 设置所有列的列宽 * @param table * @param width */ public void setAllColumnWidth(JTable table, ...
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
- 原生js实现 table表格列宽拖拽
查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...
- JS实现表格列宽拖动
在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...
- JQuery 表格拖动调整列宽效果
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...
- QTableView表格视图的列宽设置
Qt中的表格控件可以通过从QTableView或QTableWidget派生子类实现.其中,QTableWidget只是对QTableView的一种简单封装.因为使用QTableView常常需要用户指 ...
随机推荐
- bzoj 4128 矩阵求逆
/************************************************************** Problem: 4128 User: idy002 Language: ...
- nginx 方向代理 jenkins
环境 10.0.0.20 Nginx 10.0.0.21 jenkins 10.0.0.20 nginx 进入到nginx目录,去除无用字段输入到conf.d/jenkins.conf 文件中 [ro ...
- adblock 下载地址
addblock 的作用: 防止追踪.恶意域名,过滤横幅广告.弹窗广告以及视频广告. 用以支持网站的非侵入式广告将不会被屏蔽 下载地址:https://pan.baidu.com/share/li ...
- python 安装pip setuptools
注意操作前提一定要使用管理员方式运行 python目录要完全允许控制 windows7 下 0.先安装python2.7.13 32位:https://www.python.org/ftp/pytho ...
- Python:内置函数
Python所有的内置函数 Built-in Functions abs() divmod() input() open() staticmethod() all() enumerat ...
- RxJava2学习笔记(2)
上一篇已经熟悉了Observable的基本用法,但是如果仅仅只是“生产-消费”的模型,这就体现不出优势了,java有100种办法可以玩这个:) 一.更简单的多线程 正常情况下,生产者与消费者都在同一个 ...
- EasyUI学习总结(三)——easyloader源码分析(转载)
声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...
- windows 启动关闭Oracle监听和服务
经常要用数据库,让他自己启动的话,开机太慢,所以用命令启动方便点. 1.开启: 在运行中输入cmd,进入控制台,lsnrctl start回车,提示启动监听成功后 net start O ...
- 数据库 简介 升级 SQLite 总结 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 使用go语言操作db2
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 db2版本: db2_v101_linuxx64_expc 问题描述 怎么使用go语言在CentO ...