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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
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
多文件上载系统完整版
2006/10/09 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
CI框架附属类用法分析
2018/12/26 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JavaScript中的this机制
2016/01/30 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
财政局长自荐信范文
2013/12/22 职场文书
擅自离岗检讨书
2014/02/11 职场文书
洗车工岗位职责
2014/03/15 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
大学迎新标语
2014/06/26 职场文书
工作简历自我评价
2015/03/11 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS