tableObject.tFootは、表(table要素)のフッタ(tfoot要素)への参照。
フッタ(tfoot要素)には、列の要約、集計、平均などを示すセルを格納することが多い。
複数の行を、フッタ(tfoot要素)でブロック化することもできる。
構文
$tableElementReference.tFoot;
例
$tableElementReference.tFoot; // 表(table要素)のフッタ(tfoot要素)への参照
$tableElementReference.tFoot.rows[0].cells[0]; // フッタ内の1列目のセルへの参照
$tableElementReference.tFoot.rows[0].cells[0]; // フッタ内の1列目のセルへの参照
サンプル
名前 | 算数 | 国語 |
---|---|---|
太郎 | 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>
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>
<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>
#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>