jQuery3で、左右2テーブルの行の高さを合わせ、スクロールバーをテーブルの真横で1画面内に収め、左テーブルでもスクロールさせます。
【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
『jQuery Mouse Wheel Pluginのダウンロード方法』の手順で、『jquery.mousewheel.min.js』をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script>
$(function(){
var container = $('#container');
adjustContainerDiv(container);
adjustTable(container);
adjustTableDiv(container);
attachMouseWheel(container);
});
function adjustContainerDiv(target){
var windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0);
var scrollHeight = windowHeight - target.offset().top;
if (target.height() > scrollHeight) {
target.height(scrollHeight);
}
};
function adjustTable(target) {
var allTable = target.children('table');
var bodyTable1 = allTable.find('.bodyTable1');
var bodyTable2 = allTable.find('.bodyTable2');
var bodyTable1Rows = bodyTable1.children("tbody").children("tr");
var bodyTable2Rows = bodyTable2.children("tbody").children("tr");
for (var i = 0; i < bodyTable1Rows.length; i++ ) {
if (bodyTable1Rows.eq(i).height() < bodyTable2Rows.eq(i).height()) {
bodyTable1Rows.eq(i).height(bodyTable2Rows.eq(i).height());
} else {
bodyTable2Rows.eq(i).height(bodyTable1Rows.eq(i).height());
}
}
};
function adjustTableDiv(target) {
var container = target;
var allTable = target.children('table');
var bodyDiv1 = allTable.find('.bodyDiv1');
var bodyDiv2 = allTable.find('.bodyDiv2');
bodyDiv1.height(container.height());
bodyDiv2.height(container.height());
bodyDiv2.scroll(function() {
bodyDiv1.scrollTop(bodyDiv2.scrollTop());
});
}
function attachMouseWheel(target) {
var allTable = target.children('table');
var bodyDiv2 = allTable.find('.bodyDiv2');
target.mousewheel(function(event) {
if ($(event.target).closest(bodyDiv2).length > 0) {
return;
}
var position = bodyDiv2.scrollTop() - event.deltaY * event.deltaFactor;
bodyDiv2.scrollTop(position);
});
}
</script>
</head>
<body style="margin: 0 0;">
タイトル
<div id="container" style="background-color: burlywood;">
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td valign="top" style="padding: 0px;">
<div class="bodyDiv1" style="overflow: hidden; background-color: pink;">
<table border="1" class="bodyTable1">
<thead>
<tr>
<th>番号</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<tr>
<td>１</td>
<td>あああ<br />ああ</td>
</tr>
<tr>
<td>２</td>
<td>いいいいい</td>
</tr>
<tr>
<td>３</td>
<td>うう<br />ううう</td>
</tr>
<tr>
<td>４</td>
<td>ええ<br />えええ</td>
</tr>
<tr>
<td>５</td>
<td>おお<br />おおお</td>
</tr>
</tbody>
</table>
</div>
</td>
<td valign="top" style="padding: 0px;">
<div class="bodyDiv2" style="overflow-y: scroll; background-color: skyblue;">
<table border="1" class="bodyTable2">
<thead>
<tr>
<th>項目１</th>
<th>項目２</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目１－１</td>
<td>項目２－１</td>
</tr>
<tr>
<td>項目１－２</td>
<td>項目<br />２－２</td>
</tr>
<tr>
<td>項目１－３</td>
<td>項目<br />２－<br />３</td>
</tr>
<tr>
<td>項目１－４</td>
<td>項目<br />２－<br />４</td>
</tr>
<tr>
<td>項目１－５</td>
<td>項目<br />２－<br />５</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</div>
</html>
４．ダウンロードした『jquery-3.1.0.min.js』と『jquery.mousewheel.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
※テーブルの高さ＞ブラウザの高さの場合、スクロールバーは表示されるがスクロールはしない。
※テーブルの高さ＜ブラウザの高さの場合、スクロールバーは表示され、スクロールする。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。