(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. lunix存取windows共享文件夹

    在访问Windows共享资料之前,请确保Windows共享是可用的,这里就不再赘述该怎样设置Windows共享了,那可是另外一个课题. Linux访问Windows共享或者Linux共享资料给Wind ...

  2. (89c51)16x16点阵屏幕的实现

    基本组件是一个51单片机,一个74154译码器,四个MATRIX-8X8. 考虑到单片机引脚有限,所以使用P0口和P2口的总共16根引脚选择列,而P1口的低4位接译码器,译出的一个低电平选择行.所以图 ...

  3. [SOJ] DAG?

    Description 输入一个有向图,判断该图是否是有向无环图(Directed Acyclic Graph). Input 输入的第一行包含两个整数n和m,n是图的顶点数,m是边数.1<=n ...

  4. 从P1到P7——我在淘宝这7年（转）

    作者: 赵超  发布时间: 2012-02-25 14:47  阅读: 114607 次  推荐: 153   [收藏] (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘 ...

  5. PHP 苹果消息推送

    /* * 苹果消息推送方法 * $deviceToken 苹果设备token * $message 消息内容 */ function iosmsg_send($deviceToken,$message ...

  6. Remote小Demo

    Demo基于http://www.cnblogs.com/zhili/p/NETRemoting.html RemotingObj using System; using System.Collect ...

  7. Date对象 识记

    1.Date 对象创建 var myDate=new Date() 2.Date 对象属性 constructor pototype 3.Date 对象方法 Date()               ...

  8. lr_save_var() 截取任意字符串长度，以参数形式输出(参数转变量)

    Action() { char * desc=(char *)malloc(10);  //定义指针变量,以变量形式存放截取到的参数值 // char * aa = "jadkshfkasd ...

  9. HeartBeat源码安装

    只是写了安装流程,具体信息查看互联网; 环境: CentOS6.8 x86_64 min Heartbeat 3.0.6 http://hg.linux-ha.org/heartbeat-STABLE ...

  10. 解题报告8VC Venture Cup 2017 - Elimination Round

    题目链接:http://codeforces.com/contest/755 本蒟蒻做了半天只会做前两道题.. A. PolandBall and Hypothesis 题意:给出n,让你找出一个m, ...