jQueryで、2つのテーブルの行の高さを揃えます。。
【手順】
１．「jQuery1.8.1のダウンロード方法」の手順で、jQuery1.8.1をダウンロードしておきます。
２．「028-SyncTableCellHeightJQuery.html」というファイルを作成。
３．「028-SyncTableCellHeightJQuery.html」を以下の様に入力。
<html>
<head>
<script type="text/javascript" src="./jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
var table1Lines = $("#table1 tbody").children();
var table2Lines = $("#table2 tbody").children();
for(var i=0; i < table1Lines.length; i++) {
var line1 = table1Lines.eq(i);
var line2 = table2Lines.eq(i);
if ($(line1).height() > $(line2).height()) {
$(line2).height($(line1).height());
} else {
$(line1).height($(line2).height());
}
}
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<table id="table1">
<tbody>
<tr>
<td style="border:solid 1px black; height:100px;">テーブル１－１</td>
</tr>
<tr>
<td style="border:solid 1px black; height:200px;">テーブル１－２</td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="table2">
<tbody>
<tr>
<td style="border:solid 1px black; height:200px;">テーブル２－１</td>
</tr>
<tr>
<td style="border:solid 1px black; height:100px;">テーブル２－２</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<input id="button1" type="button" value="sync">
</body>
</html>
４．ダウンロードした「jquery-1.8.1.min.js」と「028-SyncTableCellHeightJQuery.html」を同一ディレクトリに配置します。
５．「028-SyncTableCellHeightJQuery.html」をブラウザで開きます。
６．以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。