示例下载

插件名称命名为:jquery.tableresize.js，代码如下：

/*

Writen by mlcactus, 2014-11-24

这是我封装的一个jquery插件，能够使table的各列可以左右拉伸，从而使宽度变小或变大

用法：$("#table_id").tableresize();

*/

(function ($) {

    $.fn.tableresize = function (options) {

        var defaults = {

            //当table的宽度到达默认最大值时，是否继续增大以至于出现横向滚动条

            resizeTable: true

        };

        var opts = $.extend(defaults, options);

        var _document = $("body");

        //设定user-select样式，防止内容被选中

        var set_user_select = function (jqueryobj, val) {

            jqueryobj.css("-moz-user-select", val).css("-webkit-user-select", val).css("-ms-user-select", val);

        };

        $(this).each(function () {

            if (!$.tableresize) {

                $.tableresize = {};

            }

            var _table = $(this);

            //设定ID

            var id = _table.attr("id") || "tableresize_" + (Math.random() * 100000).toFixed(0).toString();

            var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();

            //设定临时变量存放对象

            var cobjs = $.tableresize[id] = {};

            cobjs._currentObj = null, cobjs._currentLeft = null;

            ths.mousemove(function (e) {

                var _this = $(this);

                var left = _this.offset().left, top = _this.offset().top, width = _this.outerWidth(), height = _this.outerHeight(), right = left + width, bottom = top + height, pageX = e.pageX, pageY = e.pageY;

                var leftside = !_firstth.is(_this) && Math.abs(left - pageX) <= 5, rightside = Math.abs(right - pageX) <= 5;

                if (cobjs._currentLeft || pageY > top && pageY < bottom && (leftside || rightside)) {

                    _document.css("cursor", "e-resize");

                    set_user_select(_table, "none");

                    if (!cobjs._currentLeft) {

                        if (leftside) {

                            cobjs._currentObj = _this.prev();

                        }

                        else {

                            cobjs._currentObj = _this;

                        }

                    }

                }

                else {

                    _document.css("cursor", "auto");

                    cobjs._currentObj = null;

                }

            });

            ths.mouseout(function (e) {

                if (!cobjs._currentLeft) {

                    cobjs._currentObj = null;

                    _document.css("cursor", "auto");

                    set_user_select(_table, "auto");

                }

            });

            _document.mousedown(function (e) {

                if (cobjs._currentObj) {

                    cobjs._currentLeft = e.pageX;

                }

                else {

                    cobjs._currentLeft = null;

                }

            });

            _document.mouseup(function (e) {

                if (cobjs._currentLeft) {

                    var changeWidth = e.pageX - cobjs._currentLeft;

                    cobjs._currentObj.width(cobjs._currentObj.width() + changeWidth);

                    if (opts.resizeTable) {

                        _table.width(_table.width() + changeWidth);

                    }

                }

                cobjs._currentObj = null;

                cobjs._currentLeft = null;

                _document.css("cursor", "auto");

                set_user_select(_table, "auto");

            });

        });

    };

})(jQuery);

页面代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

    <title></title>

    <style type="text/css" >

        td{ text-align:center;}

    </style>

    <script type="text/javascript" src="script/jquery-1.10.2.js"></script>

    <script type="text/javascript" src="script/jquery.tableresize.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

             //该设置使table达到默认最大宽度时，将不再继续变宽

            var ops = { resizeTable: false };

            //使两张table同时支持左右拉伸

            $("table").tableresize(ops);

        });

    </script>

</head>

<body>

    表格1<br/>

    <table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">

		<tbody><tr>

			<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年纪</td><td style="width:200px;">地址</td><td style="width:200px;">电话</td>

		</tr><tr>

			<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>

		</tr><tr>

			<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>

		</tr><tr>

			<td>29</td><td>Name:63</td><td>Age:48</td><td>Address:90</td><td>Phone:76</td>

		</tr>

	</tbody>

    </table>

    <br/>表格2<br/>

    <table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">

		<tbody><tr>

			<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年纪</td><td style="width:200px;">地址</td><td style="width:200px;">电话</td>

		</tr><tr>

			<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>

		</tr><tr>

			<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>

		</tr>

	</tbody></table>

</body>

</html>

做了一个jquery插件，使表格的标题列可左右拉伸的更多相关文章

  1. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  2. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

  3. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  4. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  5. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

  6. 如何使用jQuery写一个jQuery插件

    jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...

  7. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  8. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  9. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

随机推荐

  1. Java 面向对象(转)

    转自:http://blog.sina.com.cn/s/blog_83c5190f01010ate.html 1.我们可以把JAVA中的类分为以下三种: 类:使用class定义且不含有抽象方法的类. ...

  2. 如何让secureCRT显示Linux的颜色

    style="padding-bottom: 0px; line-height: 1.5; margin: 0px; padding-left: 0px; padding-right: 0p ...

  3. Android Fragment(碎片)的使用

    简介 在Android中Fragment为一种可以嵌入活动中的UI片段.能让程序更加合理地利用大屏幕的空间. 使用方法 1.我们首先新建的一个onefragment.xml文件. <?xml v ...

  4. Python爬虫实战（3）：安居客房产经纪人信息采集

    1, 引言 Python开源网络爬虫项目启动之初,我们就把网络爬虫分成两类:即时爬虫和收割式网络爬虫.为了使用各种应用场景,该项目的整个网络爬虫产品线包含了四类产品,如下图所示: 本实战是上图中的“独 ...

  5. C++ 前置声明 和 包含头文件 如何选择

    假设有一个Date类 Date.h class Date { private: int year, month, day; }; 如果有个Task类的定义要用到Date类,有两种写法 其一 Task1 ...

  6. 五个典型的JavaScript面试题

    问题1: 范围(Scope) 思考以下代码: 1 2 3 4 5 (function() {    var a = b = 5; })();   console.log(b); 控制台(console ...

  7. Linux文件解压缩详解

    tar命令 我们知道在Windows下最常见的压缩文件就只有两种,一是,zip,另一个是.rar.可是Linux就不同了,它有.gz..tar.gz.tgz.bz2..Z..tar等众多的压缩文件名, ...

  8. Oracle EBS-SQL (OM-1):查询订单发货明细.sql

    select mtrh.request_number                  发货单号,       mmt.transaction_date                  发货时间,  ...

  9. （一）boost库之日期、时间

    (一)boost库之日期.时间 一.计时器  计时器,通常在一个项目中统计一个函数的执行时间是非常实用的.   #include <boost/timer.hpp> void PrintU ...

  10. __declspec(dllimport)的作用

    是时候总结一下__declspec(dllimport)的作用了.可能有人会问:__declspec(dllimport)和__declspec(dllexport)是一对的,在动态链接库中__dec ...