ホームページ >ウェブフロントエンド >jsチュートリアル >テーブルのドラッグとサイズ変更のための jQuery コード例 cells_jquery

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

WBOYオリジナル: 2016-05-16 16:20:431228ブラウズ

テーブルの 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 歳

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js_javascript スキルを使用した経験の共有次の記事：js_javascript スキルを使用した経験の共有

続きを見る

ID	名前	年纪	地址	电话
22	名前:44	年齢:23 歳	住所:47	電話:15
28	名前:42	住所:30	電話:50
29	名前:63	年齢:48	住所:90	電話:76

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

関連記事