jQuery实现的`拖动调整表格td单元格的大小:
在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小。
也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码。
代码实例如下:
复制代码 代码如下:
table {
border-collapse: collapse;
}
td {
text-align: center;
}
(function ($){
$eresize = function () {
var _document = $("body");
$(this)(function () {
if (!$eresize) {
$eresize = {};
}
var _table = $(this);
//设定ID
var id = _("id") || "tableresize_" + (om() * 100000)xed(0)ring();
var tr = _("tr")t(), ths = dren(), _firstth = t();
//设定临时变量存放对象
var cobjs = $eresize[id] = {};
cobjs._currentObj = null, cobjs._currentLeft = null;
emove(function (e) {
var _this = $(this);
var left = _et(),
top = _et(),
width = _h(),
height = _ht(),
right = left + width,
bottom = top + height,
clientX = ntX,
clientY = ntY;
var leftside = !_(_this) && (left - clientX) <= 5,
rightside = (right - clientX) <= 5;
if (cobjs._currentLeft||clientY>top&&clientY
_("cursor", "e-resize");
if (!cobjs._currentLeft) {
if (leftside) {
cobjs._currentObj = _();
}
else {
cobjs._currentObj = _this;
}
}
}
else {
cobjs._currentObj = null;
}
});
eout(function (e) {
if (!cobjs._currentLeft) {
cobjs._currentObj = null;
_("cursor", "auto");
}
});
_edown(function (e) {
if (cobjs._currentObj) {
cobjs._currentLeft = ntX;
}
else {
cobjs._currentLeft = null;
}
});
_eup(function (e) {
if (cobjs._currentLeft) {
cobjs._h(cobjs._h() + (ntX - cobjs._currentLeft));
}
cobjs._currentObj = null;
cobjs._currentLeft = null;
_("cursor", "auto");
});
});
};
})(jQuery);
$(document)y(function () {
$("table")eresize();
});
ID |
名字 |
年纪 |
地址 |
电话 |
22 |
Name:44 |
Age:23 |
Address:47 |
Phone:15 |
28 |
Name:42 |
Age:68 |
Address:30 |
Phone:50 |
29 |
Name:63 |
Age:48 |
Address:90 |
Phone:76 |