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

HTML DOMテーブルのtFootプロパティの使い方を解説

HTML DOMのtFootプロパティは、HTMLドキュメント内のテーブルに含まれる<tfoot>要素を取得するために使用されます。この記事では、tFootプロパティの構文と実際の使用例について詳しく解説します。

構文

tFootプロパティの基本構文は以下のとおりです。

object.tFoot

このプロパティを呼び出すと、対象のテーブル内にある<tfoot>要素が返されます。テーブルに<tfoot>要素が存在しない場合は、nullが返される点に注意してください。

tFootプロパティの使用例

それでは、HTML DOMテーブルのtFootプロパティを使った具体的なサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
    }
    .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 tFoot Property デモ</h1>
<table border="2">
<thead>
<tr>
<th>名前</th>
<th>出席番号</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">テーブルフッター</td>
</tr>
</tfoot>
</table>
<button onclick="get()" class="btn">tFootを表示</button>
<div class="show"></div>
<script>
    function get() {
        var tableFooter = document.querySelector('table').tFoot;
        document.querySelector(".show").innerHTML = tableFooter.innerHTML;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

HTML DOMテーブルのtFootプロパティの使い方を解説

画面上の「tFootを表示」ボタンをクリックすると、JavaScriptのget()関数が実行され、テーブルのフッター（<tfoot>要素）の内容が取得されて表示されます。

HTML DOMテーブルのtFootプロパティの使い方を解説

コードのポイント解説

このサンプルコードで重要なポイントは以下のとおりです。

  • document.querySelector('table'): ドキュメント内の最初のテーブル要素を取得します。
  • .tFoot: 取得したテーブルオブジェクトから<tfoot>要素への参照を取得します。
  • .innerHTML: フッター要素内部のHTMLコンテンツを取得し、表示用のdiv要素に出力しています。

なお、元のコードでは<thead>タグが正しく閉じられていない箇所がありましたが、修正版では</thead>で適切に閉じています。HTMLを書く際は、各要素の開始タグと終了タグの対応に注意しましょう。

まとめ

tFootプロパティを使用することで、JavaScriptから簡単にテーブルのフッター要素へアクセスできます。テーブルの合計行や注釈などを動的に操作したい場合に非常に便利なプロパティです。類似のプロパティとして、ヘッダー部分を取得するtHeadや、テーブル本体の行を取得するrowsなどもありますので、合わせて覚えておくと良いでしょう。

  1. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン

  2. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ