最基本的例子

引入JS

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

TABLE

<table class="table table-bordered">
<thead>
    <tr>
       <th>栏目类型</th>
       <th>活动名称</th>
       <th>状态</th>
       <th>操作选项</th>
    </tr>
</thead>
<tbody>
    <tr>
       <td>青春日记</td>
       <td>我们一起傻逼的日子</td>
       <td>提交</td>
       <td>审核</td>
    </tr>
    <tr>
       <td>我和孩子的成长故事</td>
       <td>成长故事</td>
       <td>通过</td>
       <td>审核</td>
    </tr>
</tbody>
</table>

JS

<script type="text/javascript">
    $(function() {
        $("table").colResizable();
    })
</script>

以上步骤即可实现最简单的鼠标拖动调整表格列宽

在线演示:colresizable

更多信息参考:http://www.bacubacu.com/colresizable/

作者:itmyhome

jQuery可调整表和列宽插件-colResizable的更多相关文章

  1. jquery实现表格可变列宽插件开发

    工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...

  2. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  3. jQuery调整表列(左右拉动调整列宽)插件__colResizable,动态列如何使用

    官网地址:http://www.bacubacu.com/colresizable/ 这里值得注意的是,如果是动态加入的列,则需要先清理调用插件生成的class,id和div之后再重新调用才会有作用. ...

  4. jQuery表格列宽可变,兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...

  5. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  6. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  7. 6款强大的 jQuery 网页布局创建及优化插件

    本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工 ...

  8. CSS 控制table 滑动及调整列宽等问题总结

    一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...

  9. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

随机推荐

  1. SDUT OJ 数据结构实验之链表七:单链表中重复元素的删除

    数据结构实验之链表七:单链表中重复元素的删除 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...

  2. DropDownList绑定及修改

    DropDownList绑定及修改 http://www.cnblogs.com/hulang/archive/2010/12/29/1920662.html   ? 1 2 3 4 5 6 7 8 ...

  3. WordPress 设置GeoIP数据库目录权限时错误解决方案

    存在一个问题 更新完WP-statistics后,不知道为什么出现了一个错误提示:设置GeoIP数据库目录权限时错误,请确保您的Web服务器有权限写入到目录/var/www/html/wordpres ...

  4. Codeforces - 527C 平衡树维护几何

    题意:给定一个矩形\(W*H\),一共\(n\)次切割操作(水平/垂直),求每次操作后得出的最大面积 随机按tag扫CF题目找到的题,可以分别用平衡树维护割边的位置和长度(\(x/y\)各两个) 具体 ...

  5. UVA - 10125 哈希

    题意:求集合中最大的\(d\)使得\(a+b=d-c\) 学习一下哈希的姿势(原来所谓链地址法就是直接跑个图啊) 哈希真有趣,全靠xjb乱搞 就叫这套hash为xjb-fibonacci-lpy-ha ...

  6. HDU - 2604 矩阵快速幂 字符串递推 两种解法

    记dp[i]为长度i且符合题意的方案数,dp[n]就是解 符合方案的是不含fmf和fff子串的字符串 考虑如何从前面几项递推出后面第i项 (★表示存在生成的非法方案)←其实没啥用处 i=1时 m③ f ...

  7. Wscript.Shell 对象详细介绍

    详细 WshShell 对象ProgID Wscript.Shell 文件名 WSHom.Ocx CLSID F935DC22-1CF0-11d0-ADB9-00C04FD58A0B IID F935 ...

  8. A - TOYS(POJ - 2318) 计算几何的一道基础题

    Calculate the number of toys that land in each bin of a partitioned toy box. 计算每一个玩具箱里面玩具的数量 Mom and ...

  9. 为什么Kafka那么快,明显领先其他mq?

    经常看到有很多Kafka的测试文章,测试结果通常都是“吊打”其他MQ.感慨它的牛B之余我觉得必要仔细分析一下它如此快速的原因.这篇文章不同于其他介绍Kafka使用或者技术实现的文章,此处我会重点解释— ...

  10. python3.6 子类的__init__调用父类的__init__

    python3.6 子类的__init__调用父类的__init__ 父类 class worker: def __init__(self): self.a=1 self.b=2 if __name_ ...