最近の更新

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);
                }

                var allTable = target.children('table');
                var headDiv1 = allTable.find('.headDiv1');
                var headDiv2 = allTable.find('.headDiv2');
                var headDiv3 = allTable.find('.headDiv3');

                var windowWidth = (window.innerWidth || document.documentElement.clientWidth || 0);
                var scrollWidth = headDiv1.width() + headDiv2.width() + headDiv3.width();
                if (target.width() > scrollWidth) {
                    target.width(scrollWidth);
                } else {
                    target.width(windowWidth);
                }
            };

            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');
                
                var bodyHeight = container.height() - (headDiv2.height() + footDiv2.height());
                bodyDiv1.height(bodyHeight);
                bodyDiv2.height(bodyHeight);
                bodyDiv3.height(bodyHeight);

                var bodyWidth = container.width() - (bodyDiv1.width() + bodyDiv3.width());
                headDiv2.width(bodyWidth);
                bodyDiv2.width(bodyWidth);
                footDiv2.width(bodyWidth);

                bodyDiv3.scroll(function() {
                    bodyDiv1.scrollTop(bodyDiv3.scrollTop());
                    bodyDiv2.scrollTop(bodyDiv3.scrollTop());
                });

                footDiv2.scroll(function() {
                    headDiv2.scrollLeft(footDiv2.scrollLeft());
                    bodyDiv2.scrollLeft(footDiv2.scrollLeft());
                });
            }
            
            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;">
        タイトル<br />
        <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>
                                            <th><div style="width: 100px;">項目3</div></th>
                                            <th><div style="width: 100px;">項目4</div></th>
                                            <th><div style="width: 100px;">項目5</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>
                                            <td><div style="width: 100px;">項目3-1</div></td>
                                            <td><div style="width: 100px;">項目4-1</div></td>
                                            <td><div style="width: 100px;">項目5-1</div></td>
                                        </tr>
                                        <tr>
                                            <td>項目1-2</td>
                                            <td>項目<br />2-2</td>
                                            <td>項目3-2</td>
                                            <td>項目4-2</td>
                                            <td>項目5-2</td>
                                        </tr>
                                        <tr>
                                            <td>項目1-3</td>
                                            <td>項目<br />2-<br />3</td>
                                            <td>項目3-3</td>
                                            <td>項目4-3</td>
                                            <td>項目5-3</td>
                                        </tr>
                                        <tr>
                                            <td>項目1-4</td>
                                            <td>項目<br />2-<br />4</td>
                                            <td>項目3-4</td>
                                            <td>項目4-4</td>
                                            <td>項目5-4</td>
                                        </tr>
                                        <tr>
                                            <td>項目1-5</td>
                                            <td>項目<br />2-<br />5</td>
                                            <td>項目3-5</td>
                                            <td>項目4-5</td>
                                            <td>項目5-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="overflow-x: scroll; 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>
                                            <th><div style="width: 100px;">Item3</div></th>
                                            <th><div style="width: 100px;">Item4</div></th>
                                            <th><div style="width: 100px;">Item5</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.以下の様に表示されれば成功です。












以上です。

左中右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.以下の様に表示されれば成功です。












以上です。

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

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



【手順】
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 headDiv1 = allTable.find('.headDiv1');
                var headDiv2 = allTable.find('.headDiv2');
                var bodyDiv1 = allTable.find('.bodyDiv1');
                var bodyDiv2 = allTable.find('.bodyDiv2');
                var footDiv1 = allTable.find('.footDiv1');
                var footDiv2 = allTable.find('.footDiv2');

                bodyDiv1.height(container.height() - (bodyDiv1.offset().top - headDiv1.offset().top + footDiv1.height()));
                bodyDiv2.height(container.height() - (bodyDiv1.offset().top - headDiv1.offset().top + footDiv1.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;">
                <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>
                    </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-y: scroll; 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>
                    </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>
                    </tr>
                </tbody>
            </table>
        </body>
    </div>
</html>

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












以上です。

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.以下の様に表示されれば成功です。

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














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











以上です。

左右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(){
                var container = $('#container');
                adjustContainerDiv(container);
                adjustTable(container);
                adjustTableDiv(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());
                });
            }
        </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』と『index.html』を同一ディレクトリに配置します。
5.『index.html』をブラウザで開きます。
6.以下の様に表示されれば成功です。

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




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



以上です。

左右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.以下の様に表示されれば成功です。

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



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











以上です。

左右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.以下の様に表示されれば成功です。














以上です。

divの高さをブラウザの表示部分の高さに合わせる方法

【目的】
jQuery3で、divの高さをブラウザの表示部分の高さに合わせます。



【手順】
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(){
                var target = $('#target');
                var windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0);
                target.height(windowHeight - target.offset().top);
            });
        </script>
    </head>
    <body style="margin: 0 0;">
        ヘッダー
        <div id="target" style="width: 200px; background-color: pink; overflow: auto;">
            あああああ<br />
            いいいいい<br />
            ううううう<br />
            えええええ<br />
            おおおおお<br />
            あああああ<br />
            いいいいい<br />
            ううううう<br />
            えええええ<br />
            おおおおお<br />
        </div>
    </body>
</html>

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

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



※divの高さ<ブラウザの高さの場合、ブラウザ最下部までdivが拡張される。






以上です。

2016年9月20日火曜日

テーブルの行の高さを変更する方法

【目的】
jQuery3で、テーブルの行の高さを変更します。



【手順】
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(){
                var tableRows = $("#tbl").children("thead,tbody").children("tr");
                var cellCount = 0;
                for (var i = 0; i < tableRows.length; i++) {
                    cellCount += tableRows.eq(i).height(100);
                }
                
            });
        </script>
    </head>
    <body>
        <table id="tbl" border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>あああああ</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>いいいいい</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>ううううう</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

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

































以上です。

テーブルのセルがthかtdかを判断する方法

【目的】
jQuery3で、テーブルのセルがthかtdかを判断します。



【手順】
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(){
                var tableRows = $("#tbl").children("thead,tbody").children("tr");
                var cellCount = 0;
                var thCount = 0;
                var tdCount = 0;
                for (var i = 0; i < tableRows.length; i++) {
                    tableCells = tableRows.eq(i).children("td,th");
                    for (var j = 0; j < tableCells.length; j++) {
                        cellCount++;
                        if (tableCells.eq(j).is("th")) {
                            thCount++;
                        }
                        if (tableCells.eq(j).is("td")) {
                            tdCount++;
                        }
                    }
                }
                $("#spn").html("セル数:" + cellCount + " th数:" + thCount + " td数:" + tdCount);
                
            });
        </script>
    </head>
    <body>
        <table id="tbl" border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>あああああ</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>いいいいい</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>ううううう</td>
                </tr>
            </tbody>
        </table>
        <span id="spn" />
    </body>
</html>

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






























以上です。

テーブルのrowspanの数を数える方法

【目的】
jQuery3で、テーブルのrowspanの数を数えます。



【手順】
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(){
                var tableRows = $("#tbl").children("thead,tbody").children("tr");
                var cellCount = 0;
                var rowspanCount = 0;
                for (var i = 0; i < tableRows.length; i++) {
                    tableCells = tableRows.eq(i).children("td,th");
                    for (var j = 0; j < tableCells.length; j++) {
                        cellCount++;
                        if (tableCells.eq(j).attr("rowspan")) {
                            rowspanCount++;
                        }
                    }
                }
                $("#spn").html("セル数:" + cellCount + " rowspan数:" + rowspanCount);
                
            });
        </script>
    </head>
    <body>
        <table id="tbl" border="1">
            <thead>
                <tr>
                    <th>番号</th>
                    <th>名前</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">1</td>
                    <td>あああああ</td>
                </tr>
                <tr>
                    <td>いいいいい</td>
                </tr>
                <tr>
                    <td rowspan="2">2</td>
                    <td>ううううう</td>
                </tr>
                <tr>
                    <td>えええええ</td>
                </tr>
            </tbody>
        </table>
        <span id="spn" />
    </body>
</html>

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






























以上です。

関連記事