Heim > Web-Frontend > js-Tutorial > Machen Sie die Titelspalte der Tabelle durch das JQuery-Plug-In package_jquery nach links und rechts dehnbar

Machen Sie die Titelspalte der Tabelle durch das JQuery-Plug-In package_jquery nach links und rechts dehnbar

WBOY
Freigeben: 2016-05-16 16:30:25
Original
1859 Leute haben es durchsucht

Der Plug-in-Name lautet: jquery.tableresize.js und der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

/*
Geschrieben von mlcactus, 24.11.2014
Dies ist ein von mir gepacktes JQuery-Plugin, das es ermöglicht, jede Spalte der Tabelle nach links und rechts zu strecken und dadurch die Breite zu verkleinern oder zu vergrößern
Verwendung:
Einzelne Tabelle: $("#table_id").tableresize(); Alle Tabellen auf der Seite: $("table").tableresize();
*/
(Funktion ($) {
$.fn.tableresize = function () {
        var _document = $("body");
          $(this).each(function () {
If (!$.tableresize) {
                        $.tableresize = {};
            }
              var _table = $(this);
                      //ID festlegen
               var id = _table.attr("id") || "tableresize_" (Math.random() * 100000).toFixed(0).toString();
            var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();
                           //Temporäres Variablenspeicherobjekt festlegen
            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 = linke Breite, unten = obere Höhe, 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();
                                                     }                          sonst {
cobjs._currentObj = _this;
                                                   }                    }
                }
                    sonst {
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;
                }
                sonst {
                    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:44Alter:23Adresse:47Telefon:15< /td>
        
28Name:42Alter:68Adresse:30Telefon:50< /td>
        
29Name:63Alter:48Adresse:90Telefon:76< /td>
        

    
表格2

    
        
            
        
            
            
    
ID名字年纪地址电话
22Name:44Alter:23Adresse:47Telefon:15< /td>
        
28Name:42Alter:68Adresse:30Telefon:50< /td>
        



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage