(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. spring+springmvc+mybatis整合框架搭建

    由于例子是基于Maven搭建的,所以首先是pom.xml文件的依赖信息: <project xmlns="http://maven.apache.org/POM/4.0.0" ...

  2. request获取ip

    public static String getIp(HttpServletRequest request) { String ip = request.getHeader("x-forwa ...

  3. dev Gridcontrol单元格值格式化及在模板中调用命令

    <dxg:GridColumn>                    <dxg:GridColumn.EditSettings>                        ...

  4. Kruskal算法的简单实现

    嘛嘛嘛,好像大家在实现Kruskal算法是都是用的边集数组,判断图的连通性咱不会,o(╯□╰)o(为什么咱这么菜诶) Kruskal算法: 规则: (1)对每一条边按照从小到大进行排序 (2)加入边的 ...

  5. FileReader和FileInputStream的区别

    1.FileReader和FileInputStream的区别: FileReader.FileWriter处理的是文本文件. FileInputStream/FileOutputStream是继承I ...

  6. LINUX利用Speedtest测速

    那么远程服务器呢?要知道大多数远程服务器是没有浏览器可以打开web页面的.用浏览器打开网页测速的瓶颈就在此,你不能按计划的对服务器进行定期的常规测试.这时需要到一个名为Speedtest-cli的软件 ...

  7. nginx 403

    location / { autoindex on; } chown -R www-data:www-data /var/www usermod -a -G www-data rootnano /et ...

  8. 小团队git开发模式

    实验室要使用Git进行代码管理,但是git非常复杂,各种开发模式也是层出不穷.作为新手的偶们很是发囧啊!!网上搜了一下,发现很多并不适合我们小团队运作(它本身就是为Linux内核管理而开发的分布式代码 ...

  9. Design Pattern——开放封闭原则

    两个特征: 1.对于扩展是开放的 2.对于更改是封闭的 意思就是说:程序在设计的时候,时刻要考虑,尽量让这个类是足够好,写好了就不要去修改了,如果有新的需求来,我们就增加一个类来解决问题,而不要更改原 ...

  10. Linq入门

    一.Linq需要的C#语法支持: 1.隐式变量的使用var var使用时必须初始化      var是强类型数据 2.自动属性:public string FirstName{get ;set;} 3 ...