tableObject.createTFoot()メソッド

tableObject.createTFoot()は、表(table要素)のフッタ(tfoot要素)を作成するメソッド。

構文

$tableElementReference.createTFoot();

戻り値

作成したフッタ(tfoot要素)、もしくは、既存のフッタ(tfoot要素)。

var $createdTFoot = $tableElementReference.createTFoot(); // 表のフッタ(tfoot要素)を作成
var $insertRow = $createdTFoot.insertRow(0); // 作成したフッタ(tfoot要素)に行(tr要素)を挿入
var $insertCell1 = $insertRow.insertCell(0); // 作成したフッタ(tfoot要素)の行(tr要素)に1列目のセル(td要素)を挿入
$insertCell1.innerHTML = "フッタの1列目のセル"; // 作成したフッタ(tfoot要素)の行(tr要素)の1列目のセル(td要素)の内容を指定

サンプル

1行目1列目 1行目2列目 1行目3列目
2行目1列目 2行目2列目 2行目3列目
3行目1列目 3行目2列目 3行目3列目

サンプルの動作について

  • 「作成」ボタンをクリックすると、表のフッタ(tfoot要素)を作成する。既にフッタがある場合は、フッタに新たな行を追加する。
  • 「削除」ボタンをクリックすると、表のフッタ(tfoot要素)を削除する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $sampleCount = 0;
function sampleCreateTFoot(){
    $sampleCount++;
    var $sampleTable = document.getElementById( "sample" );
    var $createdTFoot = $sampleTable.createTFoot();
    var $insertRow = $createdTFoot.insertRow(0);
    var $insertCell1 = $insertRow.insertCell(0);
    var $insertCell2 = $insertRow.insertCell(1);
    var $insertCell3 = $insertRow.insertCell(2);
    $insertCell1.innerHTML = "フッタ" + $sampleCount + "の1列目のセル";
    $insertCell2.innerHTML = "フッタ" + $sampleCount + "の2列目のセル";
    $insertCell3.innerHTML = "フッタ" + $sampleCount + "の3列目のセル";
}
function sampleDeleteTFoot(){
    var $sampleTable = document.getElementById( "sample" );
    var $deletedCaption = $sampleTable.deleteTFoot();
}
</script>

HTML

<p>
    <button onclick="sampleCreateTFoot()">作成</button>
    <button onclick="sampleDeleteTFoot()">削除</button>
</p>
<table id="sample">
    <tr>
        <td>1行目1列目</td>
        <td>1行目2列目</td>
        <td>1行目3列目</td>
    </tr>
    <tr>
        <td>2行目1列目</td>
        <td>2行目2列目</td>
        <td>2行目3列目</td>
    </tr>
    <tr>
        <td>3行目1列目</td>
        <td>3行目2列目</td>
        <td>3行目3列目</td>
    </tr>
</table>

CSS

<style>
#sample tr,
#sample td {
    background-color: inherit;
}
</style>

スポンサード リンク

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