最近の更新

2016年9月27日火曜日

左右2テーブルの行の高さを合わせる方法

【目的】
jQuery3で、左右2テーブルの行の高さを合わせます。



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>1</td>
                                        <td>あああ<br />ああ</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>いいいいい</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>うう<br />ううう</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td valign="top" style="padding: 0px;">
                            <table border="1" class="bodyTable2">
                                <thead>
                                    <tr>
                                        <th>項目1</th>
                                        <th>項目2</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>項目1-1</td>
                                        <td>項目2-1</td>
                                    </tr>
                                    <tr>
                                        <td>項目1-2</td>
                                        <td>項目<br />2-2</td>
                                    </tr>
                                    <tr>
                                        <td>項目1-3</td>
                                        <td>項目<br />2-<br />3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </body>
    </div>
</html>

4.ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
5.『index.html』をブラウザで開きます。
6.以下の様に表示されれば成功です。














以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事