最基本的例子

引入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. 为Arch Linux添加鼠标支持(gpm)

    gpm的安装 在Arch Linux中安装gpm $ pacman -S gpm 如果你正在使用触控板,需要安装一下插件 $ pacman -S gpm xf86-input-synaptics 需要 ...

  2. php 实现无限极分类

    原始数据 $array = array( array('id' => 1, 'pid' => 0, 'n' => '河北省'), array('id' => 2, 'pid' ...

  3. 洛谷 P2486 [SDOI2011]染色(树链剖分+线段树)

    题目链接 题解 比较裸的树链剖分 好像树链剖分的题都很裸 线段树中维护一个区间最左和最右的颜色,和答案 合并判断一下中间一段就可以了 比较考验代码能力 Code #include<bits/st ...

  4. POJ_2407 Relatives 【欧拉函数裸题】

    一.题目 Given n, a positive integer, how many positive integers less than n are relatively prime to n? ...

  5. 112th LeetCode Weekly Contest Minimum Increment to Make Array Unique

    Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. Return ...

  6. self_vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

    解决方案: 1.试一下 卸载npm uninstall webpack-dev-server,在安装这个npm i webpack-dev-server@2.9.7 2.删除node_modules目 ...

  7. Home Web Server 1.9.1 build 164 - CGI Remote Code Execution复现

    一.  Home Web Server 1.9.1 build 164 - CGI Remote Code Execution复现 漏洞描述: Home Web Server允许调用CGI程序来通过P ...

  8. Python入门书的读书笔记

    入门书地址 三引号 (""" 或 ''') 来指定多行字符串字符串是不可变的输出小数点后三位 print('{0:.3f}'.format(1 / 3))输出字符串长度为 ...

  9. C++ GUI Qt4编程(04)-2.1findDialog

    finddialog.h /* * 未实现findNextSignal和findPreviousSignal */ #ifndef FINDDIALOG_H #define FINDDIALOG_H ...

  10. Android高级工程师面试题整理

    这些题目是网友去百度.小米.乐视.美团.58.猎豹.360.新浪.搜狐等一线互联网公司面试被问到的题目.熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率. 主要分为以下几部分: (1)java ...