使表格的标题列可左右拉伸jquery插件封装


Posted in Javascript onNovember 24, 2014

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

/*

Writen by mlcactus, 2014-11-24

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

用法:

单个table:$("#table_id").tableresize();    

页面所有table:$("table").tableresize();

*/

(function ($) {

    $.fn.tableresize = function () {

        var _document = $("body");

        $(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.width(), height = _this.height(), right = left + width, bottom = top + height, clientX = e.clientX, clientY = e.clientY;

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

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

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

                    if (!cobjs._currentLeft) {

                        if (leftside) {

                            cobjs._currentObj = _this.prev();

                        }

                        else {

                            cobjs._currentObj = _this;

                        }

                    }

                }

                else {

                    cobjs._currentObj = null;

                }

            });

            ths.mouseout(function (e) {

                if (!cobjs._currentLeft) {

                    cobjs._currentObj = null;

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

                }

            });

            _document.mousedown(function (e) {

                if (cobjs._currentObj) {

                    cobjs._currentLeft = e.clientX;

                }

                else {

                    cobjs._currentLeft = null;

                }

            });

            _document.mouseup(function (e) {

                if (cobjs._currentLeft) {

                    cobjs._currentObj.width(cobjs._currentObj.width() + (e.clientX - cobjs._currentLeft));

                }

                cobjs._currentObj = null;

                cobjs._currentLeft = null;

                _document.css("cursor", "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同时支持左右拉伸

            $("table").tableresize();

        });

    </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>
Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
vue的mixins属性详解
Mar 14 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
jQuery实现隔行背景色变色
Nov 24 #Javascript
jQuery实现统计复选框选中数量
Nov 24 #Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 #Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 #Javascript
基于jQuery实现下拉框
Nov 24 #Javascript
基于jQuery实现表单提交验证
Nov 24 #Javascript
jQuery简单实现网页选项卡特效
Nov 24 #Javascript
You might like
php将会员数据导入到ucenter的代码
2010/07/18 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php中的动态调用实例分析
2015/01/07 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python3多线程基础知识点
2019/02/19 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python能否java成为主流语言吗
2020/06/22 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
不服从公司安排检讨书
2014/09/24 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2015年领班工作总结
2015/04/29 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
python解析照片拍摄时间进行图片整理
2022/07/23 Python