示例下载

插件名称命名为: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. MySQL安装配置过程

    1.下载压缩包,解压: 2: 修改  my-default.ini 文件 将一下代码前# 去掉修改成自己的地址 # These are commonly set, remove the # and s ...

  2. HDU 5145 - NPY and girls

    题意: cases T(1≤T≤10) (0<n,m≤30000) (0<ai≤30000)    n个数ai 表示n个女孩所在教室 m次询问 [L,R](1 <= L <= ...

  3. 一段简单c程序的汇编语言学习(ubuntu+x86)

    c程序代码: #include <stdio.h> int main(void) { int i=0, j=0; for(i=0; i<8; i++) j=j+1; return 0 ...

  4. 2015.4.10-SQL 高级查询(二)

    1.TOP字句: 用于规定要返回的记录的数目 select top number(个数)/percent(百分数)  列名  from 表名  2.like模糊查询,用于where字句中,以及通配符 ...

  5. 也谈谈关于WEB的感想

    距离上次在博客园发表博文已经是数年以前了,想想自己也确实有够懒惰的,实为不该. 引起我想发这篇博文的原因是 @Charlie.Zheng 所发表的 <Web系统开发构架再思考-前后端的完全分离& ...

  6. windows----composer、laravel安装

    环境要求:php+apache,并且将php的根目录配置到“环境变量”. 1.安装composer 使用cmd进入想要安装composer的目录执行如下命令,下载composer.phar文件: ph ...

  7. 为什么开发人员对于PHP语言褒贬不一

    PHP 语言,作为服务器端开发的脚本语言,在网站开发方面非常有名.从1995年 Rasmus Lerdorf 创建之后,W3Techs 的调查显示在已知的服务端编程语言中,PHP 占了82%.其中不乏 ...

  8. 实现Linux下的U盘（USB Mass Storage）驱动

    如何实现Linux下的U盘(USB Mass Storage)驱动 版本:v0.7 How to Write Linux USB MSC (Mass Storage Class) Driver Cri ...

  9. js混淆 反混淆 在线

    js反混淆地址:http://www.bm8.com.cn/jsConfusion/ 在线javascript 混淆http://www.moralsoft.com/jso-online/hdojso ...

  10. php float 转int

    round(x,prec) 参数 描述 x 可选.规定要舍入的数字. prec 可选.规定小数点后的位数. <?php echo(round(0.60)); echo(round(0.50)); ...