jQuery实现的拖动调整表格单元格的大小代码实例

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

});