jQuery实现鼠标可拖动调整表格列宽度


Posted in Javascript onMay 26, 2014

实现鼠标可拖动调整表格列宽度 如图:
jQuery实现鼠标可拖动调整表格列宽度 
一、引入文件:

<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="/js/store.js" type="text/javascript"></script> 
<script src="/js/jquery.resizableColumns.js" type="text/javascript"></script>

二、TABLE
<table id="myTable" border="1"> 
<thead> 
<tr> 
<th data-resizable-column-id="a"><input type="checkbox" /></th> 
<th data-resizable-column-id="b">栏目类型 </th> 
<th data-resizable-column-id="c">活动名称 </th> 
<th data-resizable-column-id="d">状态 </th> 
<th data-resizable-column-id="e">操作选项</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><input type="checkbox" /></td> 
<td>青春日记</td> 
<td>2014年度青春日记征文 </td> 
<td>提交 </td> 
<td>审核</td> 
</tr> 
<tr> 
<td><input type="checkbox" /></td> 
<td>我和孩子的成长故事</td> 
<td>成长故事 </td> 
<td>通过 </td> 
<td>审核</td> 
</tr> 
</tbody> 
</table>

以上html只是作为Demo 并不是我项目中所实际使用的,并且在测试的时候 也未能实现。郁闷...

三、实现表格可拖动

<script type="text/javascript"> 
$(function(){ 
$("#myTable").resizableColumns({ 
store: window.store 
}); 
}) 
</script>

在项目使用过程中 发现无需引入store.js <th>也无需data-resizable-column-id属性

并且$("#myTable").resizableColumns();也可实现功能

所需文件下载地址:http://xiazai.3water.com/201405/yuanma/jquery-resizableColumns.zip

分别解压两个文件

jquery.resizableColumns.js在\jquery-resizable-columns-gh-pages\dist路径下

store.js在store.js-master路径下

Javascript 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
js处理表格对table进行修饰
May 26 #Javascript
利用jQuery实现可以编辑的表格
May 26 #Javascript
js实现简单的购物车有图有代码
May 26 #Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
单元选择合并变色示例代码
May 26 #Javascript
jquery实现的一个文章自定义分段显示功能
May 23 #Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 #Javascript
You might like
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
又一个图片自动缩小的JS代码
2007/03/10 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python易忽视知识点小结
2015/05/25 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python 忽略warning的输出方法
2018/10/18 Python
python实现求特征选择的信息增益
2018/12/18 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
教师业务学习制度
2014/01/25 职场文书
2014年元旦感言
2014/03/06 职场文书
低碳环保标语
2014/06/12 职场文书
电力培训心得体会
2014/09/02 职场文书
2014年药房工作总结
2014/11/22 职场文书
小时代观后感
2015/06/10 职场文书
感恩教师节主题班会
2015/08/12 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
golang语言指针操作
2022/04/14 Golang