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

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

　　jQuery实现的拖动调整表格td单元格的大小:

　　在实际应用中，可能有这样的需求，那就是需要调整td单元格的大小。

　　也许是为了便于观察，也许是其他原因，反正这样的需求是有的，下面就分享一段能够实现此功能的代码。

　　代码实例如下:

　　复制代码 代码如下:

　　table {

　　border-collapse: collapse;

　　}

　　td {

　　text-align: center;

　　}

　　(function ($){

　　$.fn.tableresize = function () {

　　var _document = $("body");

　　$(this).each(function () {

　　if (!$.tableresize) {

　　$.tableresize = {};

　　}

　　var _table = $(this);

　　//设定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();

　　//设定临时变量存放对象

　　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

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

　　$(document).ready(function () {

　　$("table").tableresize();

　　});

【jQuery实现的拖动调整表格单元格的大小代码实例】相关文章：

调整Excel单元格宽度的方法02-07

在excel单元格中画表格的方法01-04

数控编程代码大全02-13

Java代码的基本知识09-03

Excel单元格怎么设置自动闪烁提醒06-08

网页滚动文字的制作HTML代码04-10

调整心态的方法05-31

硬盘逻辑故障解决方法实例07-16

excel中验算公式使用实例介绍12-08

公文写作四个技巧及实例10-14