使表格的标题列可左右拉伸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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
vant时间控件使用方法详解
Dec 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
初学CAKEPHP 基础教程
2009/11/02 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python读取视频流提取视频帧的两种方法
2020/10/22 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python 魔法函数实例及解析
2019/09/25 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Django ORM filter() 的运用详解
2020/05/14 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
简单租房协议书
2014/04/09 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年组织部工作总结
2014/11/14 职场文书
资金申请报告范文
2015/05/14 职场文书
埃及王子观后感
2015/06/16 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
如何使用python包中的sched事件调度器
2022/04/30 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript