テーブルのタイトル列を左右に伸縮可能にする jqueryプラグイン package_jquery

プラグイン名は jquery.tableresize.js で、コードは次のとおりです:

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

/*
mlccactus 著、2014 年 11 月 24 日
これは私がパッケージ化した jquery プラグインで、テーブルの各列を左右に拡張して、幅を小さくしたり大きくしたりできるようにします
使用法:
単一テーブル: $("#table_id").tableresize(); ページ上のすべてのテーブル: $("table").tableresize();
*/
(関数 ($) {
$.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、top = _this.offset().top、width = _this.width()、height = _this.height()、right = 左の幅、bottom = 上の高さ、clientX = e .clientX, clientY = e.clientY;
var leftside = !_firstth.is(_this) && Math.abs(left - clientX) If (cobjs._currentLeft || clientY > 上 && clientY _document.css("cursor", "e-resize");
If (!cobjs._currentLeft) {
if (左側) {
cobjs._currentObj = _this.prev();
} else {
cobjs._currentObj = _this;
} }
}
else {
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);  

页面代码:

复制代码代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

    
    
    
    
    <スクリプトタイプ="text/javascript">
        $(document).ready(function () {
            //左右拉伸を同時にサポートする双张テーブルを使用します
            $("テーブル").tableresize();
        });
    


    表1

    
        
            
        
            
            
            
    
    
    
表格2

    

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

        
            
        
            
            
    

ID	名前	年纪	地址	电话
22	名前:44	年齢:23	住所:47	電話:15< /td>
28	名前:42	年齢:68	住所:30	電話:50< /td>