最近の更新

2016年9月27日火曜日

左右2テーブルの行の高さを合わせ、1画面内に収める方法

【目的】
jQuery3で、左右2テーブルの行の高さを合わせ、1画面内に収めます。



【手順】
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(){
                adjustDiv($('#container'));
                adjustTable($('#container'));
            });

            function adjustDiv(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());
                    }
                }
            };
        </script>
    </head>
    <body style="margin: 0 0;">
        タイトル
        <div id="container" style="overflow: auto; background-color: burlywood;">
            <table style="border-collapse: collapse;">
                <tbody>
                    <tr>
                        <td valign="top" style="padding: 0px;">
                            <table border="1" class="bodyTable1" style="background-color: pink;">
                                <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>
                                    <tr>
                                        <td>4</td>
                                        <td>ええ<br />えええ</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>おお<br />おおお</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td valign="top" style="padding: 0px;">
                            <table border="1" class="bodyTable2" style="background-color: skyblue;">
                                <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>
                                    <tr>
                                        <td>項目1-4</td>
                                        <td>項目<br />2-<br />4</td>
                                    </tr>
                                    <tr>
                                        <td>項目1-5</td>
                                        <td>項目<br />2-<br />5</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 件のコメント:

コメントを投稿

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

関連記事