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

HTML DOM のテーブル（HTMLTableElement）が持つ deleteTHead() メソッドは、HTML ドキュメント上のテーブルから <thead> 要素（表のヘッダー部分）を削除するためのメソッドです。ユーザーの操作に応じて動的に表の見出しを消したい場合などに活用できます。

構文

基本的な構文は次のとおりです。

object.deleteTHead()

引数は取らず、対象のテーブル要素に対して呼び出すだけで <thead> が削除されます。戻り値はなく、テーブルに <thead> が存在しない場合でもエラーは発生しません。

それでは、HTML DOM テーブルの deleteTHead() メソッドを使った具体的な例を見てみましょう。

サンプルコード

<!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 deleteTHead() メソッドのデモ</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>
</table>
<button onclick="remove()" class="btn">ヘッダーを削除</button>
<script>
    function remove() {
        var tableHeader = document.querySelector('table').deleteTHead();
    }
</script>
</body>
</html>

実行結果

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

「ヘッダーを削除」ボタンをクリックすると、テーブルから <thead> が取り除かれ、見出し行が表示されなくなります。

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

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

構文

サンプルコード

実行結果

関連するメソッド