HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM テーブルの createTFoot() メソッドとは？使い方をサンプルコード付きで解説

HTML DOM の createTFoot() メソッドは、HTML文書内のテーブルに対して空の <tfoot> 要素を生成し、テーブルに追加するためのメソッドです。テーブルのフッター行（合計欄や注釈など）を動的に作成したい場合に活用できます。

構文

createTFoot() メソッドの基本的な構文は以下のとおりです。

object.createTFoot()

引数は不要で、呼び出されたテーブルオブジェクトに <tfoot> 要素が存在しない場合は新しく生成して返します。すでに存在する場合は、既存の <tfoot> 要素をそのまま返します。

createTFoot() メソッドの使用例

それでは、実際に createTFoot() メソッドを使用したサンプルコードを見てみましょう。ボタンをクリックすると、テーブルにフッターが動的に追加される仕組みです。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
    }
    caption {
        color: #db133a;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.2rem;
    }
</style>
<body>
<h1>DOM Table createTFoot() Method Demo</h1>
<table border="2">
<tr>
<td>Name</td>
<td>Roll No.</td>
</tr>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</table>
<button onclick="create()" class="btn">Create Footer</button>
<script>
    function create() {
        var tableFooter = document.querySelector('table').createTFoot();
        tableFooter.innerHTML = "This is table footer";
    }
</script>
</body>
</html>

実行結果

ページを読み込むと、名前（Name）と出席番号（Roll No.）が表示されたシンプルなテーブルと、「Create Footer」ボタンが表示されます。

この状態で「Create Footer」ボタンをクリックしてみましょう。

すると、JavaScript の create() 関数が実行され、document.querySelector('table') で取得したテーブルに対して createTFoot() が呼び出されます。これにより新しく <tfoot> 要素が生成され、innerHTML によって「This is table footer」というテキストがフッターとして挿入されます。

ポイント解説

  • 既存チェック： createTFoot() は、テーブル内にすでに <tfoot> がある場合は新しい要素を作成せず、既存の要素を返します。重複したフッターが生成されないため安心です。
  • 削除したい場合： 作成したフッターを削除するには、対になる deleteTFoot() メソッドを使用します。
  • 関連メソッド： 同様に、ヘッダーを扱う createTHead() / deleteTHead()、行を追加・削除する insertRow() / deleteRow() なども覚えておくと便利です。

動的にテーブルの構造を操作したい場面は多いため、createTFoot() メソッドの挙動をしっかり理解しておきましょう。

  1. HTML DOM Table createTHead() メソッドの使い方を解説

    createTHead() メソッドは、HTML DOM においてテーブル（table）オブジェクトに対して使用できるメソッドの一つです。このメソッドを呼び出すと、空の <thead> 要素が新しく生成され、HTML 文書内の対象テーブルに自動的に追加されます。テーブルに既に <thead> 要素が存在する場合は、新しく作成せずに既存の要素を返します。 構文 createTHead() メソッドの基本的な構文は以下の通りです。 object.createTHead() 引数は不要で、テーブルオブジェクトに対してそのまま呼び出すだけで動作します。戻り値として、作成または

  2. HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説

    HTML DOM の Table createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML ドキュメント内のテーブルに追加するためのメソッドです。JavaScript を使ってテーブルにタイトル（キャプション）を動的に付加したい場合に活用できます。構文createCaption() メソッドの基本的な構文は以下のとおりです。object.createCaption()パラメータと戻り値このメソッドは引数を受け取りません。呼び出すと、新しく生成された <caption> 要素が戻り値として返されるため、その要素に対して textC