The plug-in name is named: Jquery.tableresize.js, the code is as follows:
Copy Code code as follows:
/*
Writen by Mlcactus, 2014-11-24
This is a jquery plugin that I encapsulate to make the columns of the table stretch left and right so that the width becomes smaller or larger
Usage:
A single table:$ ("#table_id"). Tableresize ();
Page All table:$ ("table"). Tableresize ();
*/
(function ($) {
$.fn.tableresize = function () {
var _document = $ ("body");
$ (this). each (function () {
if (!$.tableresize) {
$.tableresize = {};
}
var _table = $ (this);
Set ID
var id = _table.attr ("id") | | "Tableresize_" + (Math.random () * 100000). toFixed (0). toString ();
var tr = _table.find ("tr")., ths = Tr.children (), _firstth = Ths.first ();
Set temporary variables to store objects
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 + W Idth, 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:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css" >
td{Text-align:center;}
</style>
<script type= "Text/javascript" src= "Script/jquery-1.10.2.js" ></script>
<script type= "Text/javascript" src= "Script/jquery.tableresize.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Make both tables support both left and right stretches
$ ("table"). Tableresize ();
});
</script>
<body>
Table 1<br/>
<table cellspacing= "0" border= "1" style= "border-collapse:collapse;" rules= "All" >
<tbody><tr>
<TD style= "width:200px;" >ID</TD><TD style= "width:200px;" > Name </td><td style= "width:200px;" > Age </td><td style= "width:200px;" > Address </td><td style= "width:200px;" > Tel </td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td> <td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td> <td>Phone:50</td>
</tr><tr>
<td>29</td><td>Name:63</td><td>Age:48</td><td>Address:90</td> <td>Phone:76</td>
</tr>
</tbody>
</table>
<br/> form 2<br/>
<table cellspacing= "0" border= "1" style= "border-collapse:collapse;" rules= "All" >
<tbody><tr>
<TD style= "width:200px;" >ID</TD><TD style= "width:200px;" > Name </td><td style= "width:200px;" > Age </td><td style= "width:200px;" > Address </td><td style= "width:200px;" > Tel </td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td> <td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td> <td>Phone:50</td>
</tr>
</tbody></table>
</body>
