最近の更新

2016年9月27日火曜日

左右2テーブルの行の高さを合わせ、スクロールバーをテーブルの真横で1画面内に収め、左テーブルでもスクロールする方法

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
  『jQuery Mouse Wheel Pluginのダウンロード方法』の手順で、『jquery.mousewheel.min.js』をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>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>
                            </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>項目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>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </body>
    </div>
</html>

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

※テーブルの高さ>ブラウザの高さの場合、スクロールバーは表示されるがスクロールはしない。














※テーブルの高さ<ブラウザの高さの場合、スクロールバーは表示され、スクロールする。











以上です。

関連記事