プラグイン名は 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
ID | 名前 | 年纪 | 地址 | 电话 |
22 | 名前:44 | 年齢:23 | 住所:47 | 電話:15< /td>
| 28 | 名前:42 | 年齢:68 | 住所:30 | 電話:50< /td>
| 29 | 名前:63 | 年齢:48 | 住所:90 | 電話:76< /td>
|
テーブル>
表格2
ID | 名前 | 年纪 | 地址 | 电话 |
22 | 名前:44 | 年齢:23 | 住所:47 | 電話:15< /td>
| 28 | 名前:42 | 年齢:68 | 住所:30 | 電話:50< /td>
|
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31