Home > Web Front-end > JS Tutorial > Make the title column of the table stretchable left and right jquery plug-in package_jquery

Make the title column of the table stretchable left and right jquery plug-in package_jquery

WBOY
Release: 2016-05-16 16:30:25
Original
1878 people have browsed it

The plug-in name is: jquery.tableresize.js, and the code is as follows:

Copy code The code is as follows:

/*
Written by mlcactus, 2014-11-24
This is a jquery plug-in that I packaged, which enables each column of the table to stretch left and right, thereby making the width smaller or larger
Usage:
Single table: $("#table_id").tableresize();
All tables on the page: $("table").tableresize();
*/
(function ($) {
$.fn.tableresize = function () {
        var _document = $("body");
          $(this).each(function () {
If (!$.tableresize) {
                        $.tableresize = {};
            }
              var _table = $(this);
                     //Set 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();
                           //Set temporary variable storage object
            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);  

页面代码为:

复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

    
    
    
    
    


    表格1

    
        
            
        
            
        
            
        
            
        
    
    
ID名字年纪地址电话
22Name:44Age:23Address:47Phone:15
28Name:42Age:68Address:30Phone:50
29Name:63Age:48Address:90Phone:76

    
表格2

    
        
            
        
            
        
            
        
    
ID名字年纪地址电话
22Name:44Age:23Address:47Phone:15
28Name:42Age:68Address:30Phone:50



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template