table可更改th大小的jQuery插件

浏览数：22 / 时间：2015年06月09日

(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>