(function ($) {

    $.fn.resizetable = function () {

        var tableObj = $(this);

        var inResizeRange = false;          //鼠标移到可调整范围内为true

        var inResizeRangeLClicked = false;  //鼠标在可调整范围内右键按下为true

        var inResizing = false;             //开始调整大小时为true(鼠标在可调整范围内，并按下右键)

        var resizeDiv;      //用来显示当前位置的div

        var nowThObj;       //当前正在调整的th

        var dragDirection;  //0 left, 1 right

        //如果可调整大小，需要将talbe宽度设置为固定数字，这样在调整大小后，整个表格的大小也需要调整

        var ths = tableObj.find("th");

        for (var i = 0; i < ths.length; i++) {

            $(ths[i]).width($(ths[i]).width());

        }

        tableObj.css("width", tableObj.width());

        tableObj.find("th").mousemove(function (e) {

            //鼠标在TH移动时，如果在边界范围则将鼠标改成可移动图标（边界范围是在边界的左右2px内）

            var pos = $(this).position();

            var width = $(this).width();

            if (!inResizeRange) {

                if (pos.left + width - 2 <= e.clientX) {

                    $(this).css("cursor", "col-resize");

                    inResizeRange = true;

                    nowThObj = this;

                    dragDirection = 1;

                }

                if (e.clientX - 2 <= pos.left + 2) {

                    if (this.cellIndex == 0) return;

                    $(this).css("cursor", "col-resize");

                    inResizeRange = true;

                    nowThObj = this;

                    dragDirection = 0;

                }

            }

            if (!inResizing) {

                if (!(pos.left + width - 2 <= e.clientX || e.clientX - 2 <= pos.left + 2)) {

                    $(this).css("cursor", "");

                    inResizeRange = false;

                }

            }

        }).mousedown(function (e) {

            //在可迁移范围内按下鼠标右键，创建可移动的div

            if (e.button <= 1 && inResizeRange) {

                inResizeRangeLClicked = true;

                var pos = $(this).position();

                createDragDiv(e.clientX, pos.top);

            }

        });

        $("body").mousemove(function (e) {

            //移动鼠标，显示当前位置

            if (inResizeRange && inResizeRangeLClicked) {

                $(this).css("cursor", "col-resize");

                resizeDiv.css("left", e.clientX);

            }

        }).mouseup(function (e) {

            //鼠标右键弹起，调整TH宽度，并释放资源

            if (e.button <= 1 && inResizeRange) {

                adjustWidth(e);

                inResizeRangeLClicked = false;

                destroy();

            }

        });

        //创建显示调整位置的DIV

        function createDragDiv(posLeft, posTop) {

            resizeDiv = $("<div style='position:absolute; width:2px; height:50px; background-color:gray;'></div>");

            resizeDiv.appendTo("body").css({ "left": posLeft, "top": posTop });

            inResizing = true;

        }

        //重置各标识变量，释放div

        function destroy() {

            inResizeRange = false;

            inResizeRangeLClicked = false;

            $("body").css("cursor", "");

            resizeDiv.remove();

            inResizing = false;

        }

        //调整TH大小

        function adjustWidth(e) {

            var resizeWidth = 0;

            if (dragDirection == 0) {

                //left

                resizeWidth = e.clientX - $(nowThObj).position().left;

                $(nowThObj).prev("th").width($(nowThObj).prev("th").width() + resizeWidth);

            } else {

                //right

                resizeWidth = e.clientX - ($(nowThObj).position().left + $(nowThObj).width());

                $(nowThObj).width($(nowThObj).width() + resizeWidth);

            }

            tableObj.width(tableObj.width() + resizeWidth);

        }

    };

})(jQuery)
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery-1.9.1.min.js"></script>

    <script src="jquery.resizetable.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#tableTest").resizetable();

        });

    </script>

    <style type="text/css">

        table th,td {

            border: 1px solid black;

        }

        body {

            -moz-user-select: none;

            -webkit-user-select: none;

            user-select: none;

        }

    </style>

</head>

    <body>

        <table id="tableTest" cellpadding="0" cellspacing="0" style="border-collapse:collapse; width:100%;">

            <tr>

                <th>列1</th>

                <th>列2</th>

                <th>列3</th>

            </tr>

            <tr>

                <td>cell 1</td>

                <td>cell 2</td>

                <td>cell 3</td>

            </tr>

        </table>

    </body>

</html>

table可更改th大小的jQuery插件的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  3. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...

  4. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

  5. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  6. 40个让你的网站屌到爆的jQuery插件

    一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...

  7. 动手Jquery插件

    自己动手Jquery插件 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供 ...

  8. 【转】教你开发jQuery插件

    阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblo ...

  9. 开发JQuery插件(转)

    教你开发jQuery插件(转)   阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...

随机推荐

  1. ps遇到的问题及笔记

    1. ps软件图层面板中不显示缩略图 打开软件后,任意打开一个文件,再打开图层面板(直接按F7也可),点图层面板右上角的小三角后有一个新的面板出现,点下面的"面板选项"弹出一个面板 ...

  2. 运行ORB-SLAM笔记_编译篇（一）

    1.下载代码   https://github.com/raulmur/ORB_SLAM/    (同时也可以看看作者的牛叉论文,我是打算先用代码,再回头看论文) 2.打开后如下 就好像是用一件新产品 ...

  3. c#语言简介

    语言的历史:c,c++,java,c#, c语言最早,c++语言复杂,而java把其中难的一部分去掉,也成为c--,而c#早期类似java. c#简单高效,并且与web结合. C#的运行环境是.net ...

  4. C# ExcelHelper

    using System; using System.IO; using System.Data; using System.Collections; using System.Data.OleDb; ...

  5. Android服务

    开启服务 (startservice) 服务一旦开启与调用者没有任何的关系 , 调用着的activity 即便是退出了 也不会影响 后台的service的运行. 在activity里面 不能去调用服务 ...

  6. shell的入门

    shell :弱类型. 解释型语言 从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 ...

  7. 如何让文字和input框水平放在div里

    #text_input { height: 16px; width: 133px; margin-right: 5px; padding:0 0 0 3px; border: 1px solid #C ...

  8. cocos2d-js引擎学习笔记

    cocos2d-js3.0实用语法 /*初始化继承类*/ var Enemy = cc.Sprite.extend({ hp: 0, fileName: "enemy.png", ...

  9. ACdream 1007

    input T           <=10 n k            n<=1000         k<=10^18 a1,a2,...an                | ...

  10. mac版Tomcat安装

    挺好安装的,就是网上资料有的错了. 1.下载Tomcat 网址:http://tomcat.apache.org,解压在~/Downloads 目录下,我的版本是apache-tomcat-7.0.7 ...