テーブル createTFoot() メソッド

HTML DOM Table オブジェクト

定義と使用法

createTFoot() メソッドは空の <tfoot> 要素 それをテーブルに追加します。

注記：テーブルに <tfoot> 要素がすでにある場合、 createTFoot() メソッドは既存の要素を返し、新しい要素を作成しません。

注記：<tfoot> 要素内には 1 つ以上の <tr> タグが必要です。

ヒント：テーブルから <tfoot> 要素を削除するには、 deleteTFoot() メソッド。

も参照してください：

HTML 参考マニュアル：HTML <tfoot> タグ

インスタンス

例 1

<tfoot> 元素を作成し、その中に <tr> と <td> 要素を挿入：

// id="myTable" の <table> 要素を検索：
var table = document.getElementById("myTable");
// 空の <tfoot> 要素を作成してテーブルに追加：
var footer = table.createTFoot();
// 空の <tr> 要素を作成して <tfoot> の最初の位置に追加：
var row = footer.insertRow(0);      
// 新しい <tr> 要素の最初の位置に新しいセル (<td>) を挿入：
var cell = row.insertCell(0);
// 新しいセルに太字テキストを追加：
cell.innerHTML = "<b>This is a table footer</b>";

自分で試してみる

例 2

テーブルの <tfoot> 元素の作成と削除：

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var footer = table.createTFoot();
  var row = footer.insertRow(0);
  var cell = row.insertCell(0);
  cell.innerHTML = "<b>This is a table footer</b>";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteTFoot();
}

自分で試してみる

構文

tableObject.createTFoot()

パラメータ

なし。

技術的詳細

返り値： 新しく作成された（または既存の）<tfoot> 要素。

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

HTML DOM Table オブジェクト