使表格的标题列可左右拉伸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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 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
基于xcache的配置与使用详解
2013/06/18 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
Python实现SMTP邮件发送
2020/06/16 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
网络安全方面的面试题
2015/11/04 面试题
会计工作心得体会
2014/01/13 职场文书
《风筝》教学反思
2014/04/10 职场文书
化工专业求职信
2014/07/01 职场文书
人事主管岗位职责
2015/02/04 职场文书
困难补助申请报告
2015/05/19 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Golang 实现WebSockets
2022/04/24 Golang