Enables the title column of the Table to be stretched left and right. jquery plug-in encapsulation _ jquery

This article mainly introduces how to enable the jquery plug-in encapsulation of the table title column to stretch left and right. If you need it, refer to the plug-in name: jquery. tableresize. js. The Code is as follows:

The Code is as follows:

/*
Writen by mlcactus
This is a jquery plug-in I encapsulated. It enables the columns in the table to be stretched left and right, so that the width becomes smaller or larger.
Usage:
Single table: $ ("# table_id"). tableresize ();
All tables on the page: $ ("table"). tableresize ();
*/
(Function ($ ){
$. Fn. tableresize = function (){
Var _ document = $ ("body ");
$ (This). each (function (){
If (! $. Tableresize ){
$. Tableresize = {};
}
Var _ table = $ (this );
// Set the ID
Var id = _ table. attr ("id") | "tableresize _" + (Math. random () * 100000). toFixed (0). toString ();
Var tr = _ table. find ("tr"). first (), ths = tr. children (), _ firstth = ths. first ();
// Set the object for storing temporary variables
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 = left + width, bottom = top + height, 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 ();
}
Else {
Cobjs. _ currentObj = _ this;
}
}
}
Else {
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;
}
Else {
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 );

The page code is:

The Code is as follows: