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

HTML DOM テーブルの tBodies コレクションとは？基本構文と使い方を徹底解説

HTML DOM の table tBodies コレクションは、HTML ドキュメント内のテーブルに含まれるすべての <tbody> 要素をコレクションとして取得するための機能です。テーブル内の tbody 要素の数を調べたり、特定の tbody にアクセスしたりする際に活用できます。

tBodies コレクションの基本構文

tBodies コレクションを使用する際の構文は以下の通りです。

object.tBodies

tBodies コレクションのプロパティ

プロパティ説明
lengthコレクション内に含まれる <tbody> 要素の数を返します。

tBodies コレクションのメソッド

メソッド説明
[index]指定したインデックス番号に対応する <tbody> 要素をコレクションから返します。
item(index)指定したインデックス番号に対応する <tbody> 要素をコレクションから返します。
namedItem(id)指定した id 属性を持つ <tbody> 要素をコレクションから返します。

それでは、実際に HTML DOM の table tBodies コレクションを使ったサンプルコードを見ていきましょう。

サンプルコード

以下の例では、2つの <tbody> 要素を含むテーブルを用意し、ボタンをクリックすると tbody 要素の数を画面に表示します。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
    }
    .show {
        font-size: 1.2rem;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>DOM Table tBodies Collection 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>
<tbody>
<tr>
<td>Elon</td>
<td>021717</td>
</tr>
<tr>
<td>Mario</td>
<td>011717</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Get Number of table body</button>
<div class="show"></div>
<script>
    function get() {
        var table = document.querySelector('table');
        document.querySelector('.show').innerHTML = 'Number of table body element : ' + table.tBodies.length;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM テーブルの tBodies コレクションとは？基本構文と使い方を徹底解説

「Get Number of table body」ボタンをクリックすると、テーブル内の <tbody> 要素の数が取得され、画面に表示されます。

HTML DOM テーブルの tBodies コレクションとは？基本構文と使い方を徹底解説

この例では、テーブル内に2つの <tbody> 要素が存在するため、「Number of table body element : 2」と表示されます。tBodies.length プロパティを使うことで、動的にテーブル構造を把握できるのがポイントです。

まとめ

tBodies コレクションを使えば、JavaScript からテーブル内の tbody 要素を簡単に操作できます。特に、動的にテーブルの行を追加・削除するようなWebアプリケーションでは、tbody の数や内容を確認するために頻繁に活用される機能ですので、ぜひ覚えておきましょう。

  1. 【初心者向け】HTML DOM テーブルの tHead プロパティの使い方を解説

    HTML DOM の table オブジェクトが持つ tHead プロパティは、HTML 文書内のテーブルに含まれる <thead> 要素を取得するためのプロパティです。テーブルのヘッダー部分へ動的にアクセスしたい場合に便利です。 基本構文 tHead プロパティの基本的な書き方は以下のとおりです。 object.tHead 戻り値として <thead> 要素が返されます。テーブルに <thead> が存在しない場合は null が返される点に注意してください。 サンプルコード 実際に tHead プロパティを使用した例を見てみましょう。ボタンをクリックする

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

    HTML DOMのtFootプロパティは、HTMLドキュメント内のテーブルに含まれる<tfoot>要素を取得するために使用されます。この記事では、tFootプロパティの構文と実際の使用例について詳しく解説します。構文tFootプロパティの基本構文は以下のとおりです。object.tFootこのプロパティを呼び出すと、対象のテーブル内にある<tfoot>要素が返されます。テーブルに<tfoot>要素が存在しない場合は、nullが返される点に注意してください。tFootプロパティの使用例それでは、HTML DOMテーブルのtFootプロパティを使った具体的なサン