テーブルのドラッグとサイズ変更のための jQuery コード例 cells

テーブルの TD セルのサイズを調整するためのドラッグの JQuery 実装:

実際のアプリケーションでは、td セルのサイズを調整する必要がある場合があります。
観察を容易にするためかもしれませんし、他の理由からかもしれませんが、とにかく、この機能を実現できるコードを共有しましょう。

コード例は次のとおりです:

コードをコピーコードは次のとおりです:

<頭>

脚本之家

<スクリプト src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
<スクリプトタイプ="text/javascript">
(関数 ($){
$.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(関数(e) {
        var _this = $(this);
        var left = _this.offset().left,
            トップ = _this.offset().top,
            width = _this.width(),
            高さ = _this.height(),
            右 = 左の幅、
            底部 = 上部の高さ、
            clientX = e.clientX,
            clientY = e.clientY;
        var leftside = !_firstth.is(_this) && Math.abs(left - clientX)             rightside = Math.abs(right - clientX)
        if (cobjs._currentLeft||clientY>top&&clientY           _document.css("カーソル", "電子サイズ変更");
          if (!cobjs._currentLeft) {
            if (左側) {
              cobjs._currentObj = _this.prev();
            }
            他 {
              cobjs._currentObj = _this;
            }
          }
        }
        他 {
          cobjs._currentObj = null;
        }
      });
      ths.mouseout(関数(e) {
        if (!cobjs._currentLeft) {
          cobjs._currentObj = null;
          _document.css("カーソル", "自動");
        }
      });
      _document.mousedown(関数 (e) {
        if (cobjs._currentObj) {
          cobjs._currentLeft = e.clientX;
        }
        他 {
          cobjs._currentLeft = null;
        }
      });
      _document.mouseup(関数 (e) {
        if (cobjs._currentLeft) {
          cobjs._currentObj.width(cobjs._currentObj.width() (e.clientX - cobjs._currentLeft));
        }
        cobjs._currentObj = null;
        cobjs._currentLeft = null;
        _document.css("カーソル", "自動");
      });
    });
};
})(jQuery);

$(document).ready(function () {
$("テーブル").tableresize();
});



















年齢: 68 歳