最近の更新

2016年9月28日水曜日

左中右3テーブルの行の高さを合わせ、ヘッダー・フッターを固定にする方法

【目的】
jQuery3で、左中右3テーブルの行の高さを合わせ、ヘッダー・フッターを固定にします。



【手順】
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 bodyTable3 = allTable.find('.bodyTable3');
                var bodyTable1Rows = bodyTable1.children("tbody").children("tr");
                var bodyTable2Rows = bodyTable2.children("tbody").children("tr");
                var bodyTable3Rows = bodyTable3.children("tbody").children("tr");
                for (var i = 0; i < bodyTable1Rows.length; i++ ) {
                    var heiestHeight = 0;
                    if (bodyTable1Rows.eq(i).height() < bodyTable2Rows.eq(i).height()) {
                        if (bodyTable2Rows.eq(i).height() < bodyTable3Rows.eq(i).height()) {
                            heiestHeight = bodyTable3Rows.eq(i).height();
                        } else {
                            heiestHeight = bodyTable2Rows.eq(i).height();
                        }
                    } else {
                        if (bodyTable1Rows.eq(i).height() < bodyTable3Rows.eq(i).height()) {
                            heiestHeight = bodyTable3Rows.eq(i).height();
                        } else {
                            heiestHeight = bodyTable1Rows.eq(i).height();
                        }
                    }
                    bodyTable1Rows.eq(i).height(heiestHeight);
                    bodyTable2Rows.eq(i).height(heiestHeight);
                    bodyTable3Rows.eq(i).height(heiestHeight);
                }
            };

            function adjustTableDiv(target) {
                var container = target;
                var allTable = target.children('table');
                var headDiv1 = allTable.find('.headDiv1');
                var headDiv2 = allTable.find('.headDiv2');
                var headDiv3 = allTable.find('.headDiv3');
                var bodyDiv1 = allTable.find('.bodyDiv1');
                var bodyDiv2 = allTable.find('.bodyDiv2');
                var bodyDiv3 = allTable.find('.bodyDiv3');
                var footDiv1 = allTable.find('.footDiv1');
                var footDiv2 = allTable.find('.footDiv2');
                var footDiv3 = allTable.find('.footDiv3');

                bodyDiv1.height(container.height() - (bodyDiv1.offset().top - headDiv1.offset().top + footDiv1.height()));
                bodyDiv2.height(container.height() - (bodyDiv1.offset().top - headDiv1.offset().top + footDiv1.height()));
                bodyDiv3.height(container.height() - (bodyDiv1.offset().top - headDiv1.offset().top + footDiv1.height()));
                
                bodyDiv3.scroll(function() {
                    bodyDiv1.scrollTop(bodyDiv3.scrollTop());
                    bodyDiv2.scrollTop(bodyDiv3.scrollTop());
                });
            }
            
            function attachMouseWheel(target) {
                var allTable = target.children('table');
                var bodyDiv3 = allTable.find('.bodyDiv3');

                target.mousewheel(function(event) {
                    if ($(event.target).closest(bodyDiv3).length > 0) {
                        return;
                    }
                    var position = bodyDiv3.scrollTop() - event.deltaY * event.deltaFactor;
                    bodyDiv3.scrollTop(position);
                });
            }
        </script>
    </head>
    <body style="margin: 0 0;">
        タイトル
        <div id="container" style="background-color: burlywood;">
            <table style="border-collapse: collapse;">
                <thead>
                    <tr>
                        <td valign="top" style="padding: 0px;">
                            <div class="headDiv1" style="overflow: hidden; background-color: hotpink;">
                                <table border="1" class="headTable1">
                                    <thead>
                                        <tr>
                                            <th><div style="width: 50px;">番号</div></th>
                                            <th><div style="width: 100px;">名前</div></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </td>
                        <td valign="top" style="padding: 0px;">
                            <div class="headDiv2" style="overflow: hidden; background-color: cornflowerblue;">
                                <table border="1" class="headTable2">
                                    <thead>
                                        <tr>
                                            <th><div style="width: 100px;">項目1</div></th>
                                            <th><div style="width: 100px;">項目2</div></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </td>
                        <td valign="top" style="padding: 0px;">
                            <div class="headDiv3" style="overflow: hidden; background-color: lightseagreen;">
                                <table border="1" class="headTable3">
                                    <thead>
                                        <tr>
                                            <th><div style="width: 100px;">備考1</div></th>
                                            <th><div style="width: 100px;">備考2</div></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td valign="top" style="padding: 0px;">
                            <div class="bodyDiv1" style="overflow: hidden; background-color: pink;">
                                <table border="1" class="bodyTable1">
                                    <tbody>
                                        <tr>
                                            <td><div style="width: 50px;">1</div></td>
                                            <td><div style="width: 100px;">あああ<br />ああ</div></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: hidden; background-color: skyblue;">
                                <table border="1" class="bodyTable2">
                                    <tbody>
                                        <tr>
                                            <td><div style="width: 100px;">項目1-1</div></td>
                                            <td><div style="width: 100px;">項目2-1</div></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>
                        <td valign="top" style="padding: 0px;">
                            <div class="bodyDiv3" style="overflow-y: scroll; background-color: palegreen;">
                                <table border="1" class="bodyTable3">
                                    <tbody>
                                        <tr>
                                            <td><div style="width: 100px;">備考1-1</div></td>
                                            <td><div style="width: 100px;">備考2-1</div></td>
                                        </tr>
                                        <tr>
                                            <td>備考1-2</td>
                                            <td>備考2-2</td>
                                        </tr>
                                        <tr>
                                            <td>備考1-3</td>
                                            <td>備考2-3</td>
                                        </tr>
                                        <tr>
                                            <td>備考1-4</td>
                                            <td>備考2-4</td>
                                        </tr>
                                        <tr>
                                            <td>備考1-5</td>
                                            <td>備考<br />2<br />-<br />5</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top" style="padding: 0px;">
                            <div class="footDiv1" style="background-color: deeppink;">
                                <table border="1" class="footTable1">
                                    <thead>
                                        <tr>
                                            <th><div style="width: 50px;">No</div></th>
                                            <th><div style="width: 100px;">Name</div></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </td>
                        <td valign="top" style="padding: 0px;">
                            <div class="footDiv2" style="background-color: dodgerblue;">
                                <table border="1" class="footTable2">
                                    <thead>
                                        <tr>
                                            <th><div style="width: 100px;">Item1</div></th>
                                            <th><div style="width: 100px;">Item2</div></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </td>
                        <td valign="top" style="padding: 0px;">
                            <div class="footDiv3" style="background-color: limegreen;">
                                <table border="1" class="footTable3">
                                    <thead>
                                        <tr>
                                            <th><div style="width: 100px;">Note1</div></th>
                                            <th><div style="width: 100px;">Note2</div></th>
                                        </tr>
                                    </thead>
                                </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.以下の様に表示されれば成功です。












以上です。

0 件のコメント:

コメントを投稿

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

関連記事