


JQuery table drag adjustment column width effect (written by myself)_jquery
May 16, 2016 pm 04:37 PMSimilar to the effect of dragging the header of a table in a desktop program, when the mouse stays on the border line of the header, the mouse will change into a shape indicating dragging left and right. Then drag the mouse, and a line will appear in the table. The vertical line moves with the mouse. Finally, when the mouse is released, the table column width will be adjusted. I have been free recently, so I tried to implement it myself, and I would like to share the small results here.
First you need the mouse icon file as shown in the picture. Search for *.cur in your hard drive and you will definitely find it.
In order to be able to use this effect on all pages without changing any HTML on the page, I integrated all the code in $(document).ready(function() {}); and wrote a separate JS file.
Use a 1 pixel wide DIV to simulate a vertical line and add it to the body element after the page loads
$(document).ready(function() { $("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> "); });
The next step is the problem of mouse deformation when the mouse moves to the vertical border of the table. At first I considered adding a small block-level element in the table header to trigger the mousemove and mouseout events, but for the sake of simplicity, I chose to change the mouse movement for the entire table. Add this event to the header.
Handle mouse transformations in TH's mousemove event:
$("th").bind("mousemove", function(event) { var th = $(this); //不給第一列和最后一列添加效果 if (th.prevAll().length <= 1 || th.nextAll().length < 1) { return; } var left = th.offset().left; //距離表頭邊框線左右4像素才觸發(fā)效果 if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) { th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' }); //修改為你的鼠標(biāo)圖標(biāo)路徑 } else { th.css({ 'cursor': 'default' }); } });
When the mouse is pressed, the vertical line is displayed, and its height and position CSS properties are set. At the same time, the TH object that currently wants to change the column width is recorded. Because a border line is shared by two THs, the previous one is always taken here. TH object.
$("th").bind("mousedown", function(event) { var th = $(this); //與mousemove函數(shù)中同樣的判斷 if (th.prevAll().length < 1 | th.nextAll().length < 1) { return; } var pos = th.offset(); if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) { var height = th.parent().parent().height(); var top = pos.top; $("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" }); //全局變量,代表當(dāng)前是否處于調(diào)整列寬狀態(tài) lineMove = true; //總是取前一個(gè)TH對(duì)象 if (event.clientX - pos.left < th.width() / 2) { currTh = th.prev(); } else { currTh = th; } } });
Next is the effect of the vertical line moving when the mouse moves, because it needs to have this effect when the mouse leaves the TH element. This effect is written in the mousemove function of the BODY element
$("body").bind("mousemove", function(event) { if (lineMove == true) { $("#line").css({ "left": event.clientX }).show(); } });
The last is the final column width adjustment effect when the mouse bounces up. Here I added the same mouseup code to the BODY and TH elements. I originally thought that I only needed to add the mouseup function to BODY, but I didn't understand why the event was not triggered when the mouse was in TH, so I had to add code to the TH element. My level is limited, and I don’t know how to extract the completely repeated code below.
$("body").bind("mouseup", function(event) { if (lineMove == true) { $("#line").hide(); lineMove = false; var pos = currTh.offset(); var index = currTh.prevAll().length; currTh.width(event.clientX - pos.left); currTh.parent().parent().find("tr").each(function() { $(this).children().eq(index).width(event.clientX - pos.left); }); } }); $("th").bind("mouseup", function(event) { if (lineMove == true) { $("#line").hide(); lineMove = false; var pos = currTh.offset(); var index = currTh.prevAll().length; currTh.width(event.clientX - pos.left); currTh.parent().parent().find("tr").each(function() { $(this).children().eq(index).width(event.clientX - pos.left); }); } });
Okay, as long as you introduce the JS file containing the above code into the page that needs this effect, you can add this effect to the table on the page.
In addition, the above code has no effect when customizing the mouse icon in Firefox. The jquery used is 1.2.6

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

Event capture and bubble are two stages of event propagation in DOM. Capture is from the top layer to the target element, and bubble is from the target element to the top layer. 1. Event capture is implemented by setting the useCapture parameter of addEventListener to true; 2. Event bubble is the default behavior, useCapture is set to false or omitted; 3. Event propagation can be used to prevent event propagation; 4. Event bubbling supports event delegation to improve dynamic content processing efficiency; 5. Capture can be used to intercept events in advance, such as logging or error processing. Understanding these two phases helps to accurately control the timing and how JavaScript responds to user operations.

JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf

If JavaScript applications load slowly and have poor performance, the problem is that the payload is too large. Solutions include: 1. Use code splitting (CodeSplitting), split the large bundle into multiple small files through React.lazy() or build tools, and load it as needed to reduce the first download; 2. Remove unused code (TreeShaking), use the ES6 module mechanism to clear "dead code" to ensure that the introduced libraries support this feature; 3. Compress and merge resource files, enable Gzip/Brotli and Terser to compress JS, reasonably merge files and optimize static resources; 4. Replace heavy-duty dependencies and choose lightweight libraries such as day.js and fetch
