Tutoriel sur la façon de modifier la taille des colonnes de n'importe quelle table

Cette implémentation est basée sur jquery, qui réalise parfaitement la fonction de glisser et de modifier la taille des colonnes du tableau. Placez simplement le code en bas de votre page (jquery doit être introduit en premier).

$(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();
       }
   });


});

Lieux de ce plug-in qui peuvent devoir être modifiés

1 L'identifiant et le masque du calque de masque peuvent entrer en conflit avec certains de vos éléments. . Il est recommandé de les remplacer par d'autres.

2. L'index z du calque de masque peut ne pas être assez grand. Lorsque vous ne pouvez pas arrêter de faire glisser, augmentez la valeur maximale. 2147483647

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!