jQuery3で、左右2テーブルの行の高さを合わせます。
【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(function(){
adjustTable($('#container'));
});
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());
}
}
};
</script>
</head>
<body>
<div id="container">
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td valign="top" style="padding: 0px;">
<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>
</tbody>
</table>
</td>
<td valign="top" style="padding: 0px;">
<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>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</div>
</html>
４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。