Tutorial on how to change the column size of any table

This implementation is based on jquery, which perfectly realizes the function of dragging and changing the column size of the table. Just place the code at the bottom of your page (jquery must be introduced first).

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


});

Places in this plug-in that may need to be modified

1. The id and mask of the mask layer may conflict with some of your elements. It is recommended to change them to others

2. The z-index of the mask layer may not be enough Big, when you can’t stop dragging, increase the z-index. The maximum value is 2147483647

The above is the detailed content of Tutorial on how to change the column size of any table. For more information, please follow other related articles on the PHP Chinese website!