Tutorial zum Ändern der Spaltengröße einer beliebigen Tabelle

Diese Implementierung basiert auf JQuery, das die Funktion des Ziehens und Änderns der Spaltengröße der Tabelle perfekt realisiert. Platzieren Sie einfach den Code am Ende Ihrer Seite (JQuery muss zuerst eingeführt werden).

$(function () {var isMouseDown = false;var currentTh = null;
   $('table th').bind({
       mousedown:function (e) {           var $th = $(this);           var left = $th.offset().left; //元素距左   var rightPos = left + $th.outerWidth();           if (rightPos-4<= e.pageX && e.pageX <= rightPos) {
               isMouseDown = true;
               currentTh = $th;
               $(&#39;table th&#39;).css(&#39;cursor&#39;,&#39;e-resize&#39;);               //创建遮罩层，防止mouseup事件被其它元素阻止冒泡，导致mouseup事件无法被body捕获，导致拖动不能停止   var bodyWidth = $(&#39;body&#39;).width();               var bodyHeight = $(&#39;body&#39;).height();
               $(&#39;body&#39;).append(&#39;<div id="mask" style="opacity:0;top:0px;left:0px;cursor:e-resize;background-color:green;position:absolute;z-index:9999;width:&#39;+bodyWidth+&#39;px;height:&#39;+bodyHeight+&#39;px;"></div>');
           }
       }
       
   });

   $('body').bind({
       mousemove:function(e) {           //移动到column右边缘提示   $('table th').each(function (index,eleDom) {               var ele = $(eleDom);               var left = ele.offset().left; //元素距左   var rightPos = left + ele.outerWidth();               if (rightPos-4<= e.pageX && e.pageX <= rightPos) { //移到列右边缘   ele.css('cursor','e-resize');
               }else{                   if(!isMouseDown){ //不是鼠标按下的时候取消特殊鼠标样式   ele.css("cursor","auto");
                   }
               }
           });           //改变大小   if(currentTh != null){               if(isMouseDown){ //鼠标按下了，开始移动   var left = currentTh.offset().left;                   var paddingBorderLen = currentTh.outerWidth()-currentTh.width();
                   currentTh.width((e.pageX-left-paddingBorderLen)+'px');
               }
           }
       },
       mouseup:function (e) {
           isMouseDown = false;
           currentTh = null;
           $('table th').css('cursor','auto');
           $('#mask').remove();
       }
   });


});

Orte, die in diesem Plug-in möglicherweise geändert werden müssen

1 Die ID und Maske der Maskenebene kann mit einigen Ihrer Elemente in Konflikt stehen . Es wird empfohlen, sie auf andere zu ändern.

Der Z-Index der Maskenebene ist möglicherweise nicht groß genug 2147483647

Das obige ist der detaillierte Inhalt vonTutorial zum Ändern der Spaltengröße einer beliebigen Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!