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

HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説

HTML DOM の Table createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML ドキュメント内のテーブルに追加するためのメソッドです。JavaScript を使ってテーブルにタイトル（キャプション）を動的に付加したい場合に活用できます。

構文

createCaption() メソッドの基本的な構文は以下のとおりです。

object.createCaption()

パラメータと戻り値

このメソッドは引数を受け取りません。呼び出すと、新しく生成された <caption> 要素が戻り値として返されるため、その要素に対して textContent や innerHTML を設定することで、キャプションのテキストを自由に指定できます。

使用例

それでは、HTML DOM Table createCaption() メソッドの具体的な使用例を見てみましょう。以下のコードでは、ボタンをクリックするとテーブルにキャプションが追加される仕組みになっています。

<!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 createCaption() メソッドのデモ</h1>
<table border="2">
<tr>
<td>名前</td>
<td>出席番号</td>
</tr>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</table>
<button onclick="create()" class="btn">キャプションを作成</button>
<script>
   function create() {
      var tableCaption = document.querySelector('table').createCaption();
      tableCaption.innerHTML = "学生データ";
   }
</script>
</body>
</html>

コードの解説

ボタンがクリックされると create() 関数が実行され、querySelector('table') で取得したテーブル要素に対して createCaption() メソッドを呼び出します。これにより空の <caption> 要素がテーブルに追加され、続いて innerHTML プロパティを使って「学生データ」というテキストが設定されます。

実行結果

ページを開いた直後の表示は以下のようになります。

HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説

「キャプションを作成」ボタンをクリックすると、テーブルにキャプションが追加され、次のように表示されます。

HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説

まとめ

createCaption() メソッドを使えば、静的な HTML にキャプションを記述しなくても、ユーザーの操作に応じて動的にテーブルへタイトルを追加できます。なお、既にキャプションが存在する場合は新しい要素を作成せず、既存の <caption> 要素が返される点にも注意してください。逆にキャプションを削除したい場合は、deleteCaption() メソッドを使用します。

  1. HTML DOM Table createTHead() メソッドの使い方を解説

    createTHead() メソッドは、HTML DOM においてテーブル（table）オブジェクトに対して使用できるメソッドの一つです。このメソッドを呼び出すと、空の <thead> 要素が新しく生成され、HTML 文書内の対象テーブルに自動的に追加されます。テーブルに既に <thead> 要素が存在する場合は、新しく作成せずに既存の要素を返します。 構文 createTHead() メソッドの基本的な構文は以下の通りです。 object.createTHead() 引数は不要で、テーブルオブジェクトに対してそのまま呼び出すだけで動作します。戻り値として、作成または

  2. HTML DOM テーブルの createTFoot() メソッドとは？使い方をサンプルコード付きで解説

    HTML DOM の createTFoot() メソッドは、HTML文書内のテーブルに対して空の <tfoot> 要素を生成し、テーブルに追加するためのメソッドです。テーブルのフッター行（合計欄や注釈など）を動的に作成したい場合に活用できます。構文createTFoot() メソッドの基本的な構文は以下のとおりです。object.createTFoot()引数は不要で、呼び出されたテーブルオブジェクトに <tfoot> 要素が存在しない場合は新しく生成して返します。すでに存在する場合は、既存の <tfoot> 要素をそのまま返します。createTFoot