tableObject.tFootコレクション

tableObject.tFootは、表(table要素)のフッタ(tfoot要素)への参照。

フッタ(tfoot要素)には、列の要約、集計、平均などを示すセルを格納することが多い。

複数の行を、フッタ(tfoot要素)でブロック化することもできる。

構文

$tableElementReference.tFoot;

$tableElementReference.tFoot; // 表(table要素)のフッタ(tfoot要素)への参照

$tableElementReference.tFoot.rows[0].cells[0]; // フッタ内の1列目のセルへの参照

サンプル

2組のテスト結果
名前 算数 国語
太郎 84 52
次郎 62 90
花子 73 55
合計 算数 国語
平均 算数 国語

サンプルの動作について

算数と国語の合計値と平均値を、JavaScriptで動的に算出している。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function(){

    var $sampleTable = document.getElementById( "sample" );
    var $sampleColgroup = $sampleTable.getElementsByTagName( "colgroup" )
    var $sampleTHead = $sampleTable.tHead;
    var $sampleTHeadCells = $sampleTHead.rows[0].cells;
    var $sampleTBodies = $sampleTable.tBodies;
    var $sampleTFoot = $sampleTable.tFoot;
    var $sampleTFootCells1 = $sampleTFoot.rows[0].cells;
    var $sampleTFootCells2 = $sampleTFoot.rows[1].cells;
    var $sumBySubject = [];

    for ( var $tbodyIndex = 0; $tbodyIndex < $sampleTBodies.length; $tbodyIndex++ ) {
        var $sampleTBodyRows = $sampleTBodies[$tbodyIndex].rows;
        for ( var $rowIndex = 0; $rowIndex < $sampleTBodyRows.length; $rowIndex++ ) {
            var $sampleTBodyCells = $sampleTBodyRows[$rowIndex].cells;
            for ( var $cellIndex = 1; $cellIndex < $sampleTBodyCells.length; $cellIndex++ ) {
                $sumBySubject[$cellIndex] = 0;
            }
        }
    }
    for ( var $tbodyIndex = 0; $tbodyIndex < $sampleTBodies.length; $tbodyIndex++ ) {
        var $sampleTBodyRows = $sampleTBodies[$tbodyIndex].rows;
        for ( var $rowIndex = 0; $rowIndex < $sampleTBodyRows.length; $rowIndex++ ) {
            var $sampleTBodyCells = $sampleTBodyRows[$rowIndex].cells;
            for ( var $cellIndex = 1; $cellIndex < $sampleTBodyCells.length; $cellIndex++ ) {
                if( $cellIndex != 0 ){
                    $sumBySubject[$cellIndex] += parseInt( $sampleTBodyCells[$cellIndex].innerHTML );
                }
            }
        }
    }

    for ( var $cellIndex = 1; $cellIndex < $sampleTFootCells1.length; $cellIndex++ ) {
        $sampleTFootCells1[$cellIndex].innerHTML = $sumBySubject[$cellIndex];
    }
    for ( var $cellIndex = 1; $cellIndex < $sampleTFootCells2.length; $cellIndex++ ) {
        $sampleTFootCells2[$cellIndex].innerHTML = Math.round( $sumBySubject[$cellIndex] / ( $sampleTable.rows.length - $sampleTHead.rows.length - $sampleTFoot.rows.length ) );
    }

}
</script>

HTML

<table id="sample">
    <caption id="sampleCaption">
        2組のテスト結果
    </caption>
    <colgroup span="1" id="sampleColgroupName"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <thead>
        <tr>
            <th>名前</th>
            <th>算数</th>
            <th>国語</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>太郎</td>
            <td>84</td>
            <td>52</td>
        </tr>
        <tr>
            <td>次郎</td>
            <td>62</td>
            <td>90</td>
        </tr>
        <tr>
            <td>花子</td>
            <td>73</td>
            <td>55</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合計</th>
            <th>算数</th>
            <th>国語</th>
        </tr>
        <tr>
            <th>平均</th>
            <th>算数</th>
            <th>国語</th>
        </tr>
    </tfoot>
</table>

CSS

<style>
#sampleCaption {
    font-size: inherit;
    margin: 0px;
    padding: 3px;
    background-color: lightgreen;
}
#sample tr,
#sample th,
#sample td {
    background-color: inherit;
    font-size: inherit !important;
    color: inherit !important;
}
#sample thead,
#sample tfoot,
#sampleColgroupName {
    background-color: lightblue;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, Tableオブジェクト, リファレンス パーマリンク