HTML DOM テーブルの deleteTFoot() メソッドとは？構文と使い方を解説
HTML DOM のテーブル deleteTFoot() メソッドは、HTML ドキュメント内のテーブルから <tfoot> 要素を削除するためのメソッドです。テーブルのフッター部分（合計行や注釈など）を JavaScript から動的に削除したい場合に活用できます。
構文
deleteTFoot() メソッドの構文は以下のとおりです。
object.deleteTFoot()
引数は不要で、テーブルオブジェクトに対して呼び出すだけで、そのテーブルに含まれる <tfoot> 要素が削除されます。
それでは、HTML DOM テーブル deleteTFoot() メソッドの具体的な使用例を見ていきましょう。
サンプルコード
<!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 deleteTFoot() Method Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</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">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="remove()" class="btn">Remove Footer</button>
<script>
function remove() {
var tableFooter = document.querySelector('table').deleteTFoot();
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
ページ上の「Remove Footer」ボタンをクリックすると、テーブルからフッター部分が削除されます。
まとめ
deleteTFoot() メソッドを使えば、テーブルの <tfoot> 要素を簡単に削除できます。なお、逆にフッターを追加したい場合は createTFoot() メソッドを使用します。両者を組み合わせることで、テーブルのフッターを動的に制御できます。
-
HTML DOM テーブルの createTFoot() メソッドとは？使い方をサンプルコード付きで解説
HTML DOM の createTFoot() メソッドは、HTML文書内のテーブルに対して空の <tfoot> 要素を生成し、テーブルに追加するためのメソッドです。テーブルのフッター行（合計欄や注釈など）を動的に作成したい場合に活用できます。構文createTFoot() メソッドの基本的な構文は以下のとおりです。object.createTFoot()引数は不要で、呼び出されたテーブルオブジェクトに <tfoot> 要素が存在しない場合は新しく生成して返します。すでに存在する場合は、既存の <tfoot> 要素をそのまま返します。createTFoot
-
HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説
HTML DOM の Table createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML ドキュメント内のテーブルに追加するためのメソッドです。JavaScript を使ってテーブルにタイトル（キャプション）を動的に付加したい場合に活用できます。構文createCaption() メソッドの基本的な構文は以下のとおりです。object.createCaption()パラメータと戻り値このメソッドは引数を受け取りません。呼び出すと、新しく生成された <caption> 要素が戻り値として返されるため、その要素に対して textC