HTMLでテーブルに行を追加するにはどうすればいいですか？

```html

HTML テーブルに行を追加する方法

HTML テーブルに行を追加する方法

HTML のテーブルに行を追加するには、JavaScript の `element.insertRow()` メソッドを使用します。

insertRow() メソッド

`insertRow()` メソッドは、テーブルに新しい行を挿入します。このメソッドは、新しい `` 要素を作成し、指定されたインデックスに挿入します。 * 引数: 挿入する行のインデックス（省略可。省略した場合は末尾に追加） * 戻り値: 挿入された `` 要素

使用方法

`insertRow()` メソッドを使用するには、以下の手順に従います。 1. 行を追加するテーブル要素を取得します。 2. `insertRow()` メソッドを使用して、新しい行を作成し、テーブルに追加します。 3. 新しい行にセルを追加します。

使用例

例1: テーブルの末尾に行を追加する

以下の例では、`myTable` という ID を持つテーブルの末尾に、新しい行を追加します。 

<table id="myTable">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
</table>

<script>
  // テーブル要素を取得
  const table = document.getElementById("myTable");

  // 新しい行を作成
  const newRow = table.insertRow();

  // 新しい行にセルを追加
  const cell1 = newRow.insertCell();
  const cell2 = newRow.insertCell();

  // セルの内容を設定
  cell1.textContent = "田中";
  cell2.textContent = "30";
</script>

例2: テーブルの特定の位置に行を追加する

以下の例では、`myTable` という ID を持つテーブルの2行目に、新しい行を追加します。 

<table id="myTable">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>25</td>
  </tr>
</table>

<script>
  // テーブル要素を取得
  const table = document.getElementById("myTable");

  // 2行目に新しい行を作成
  const newRow = table.insertRow(1);

  // 新しい行にセルを追加
  const cell1 = newRow.insertCell();
  const cell2 = newRow.insertCell();

  // セルの内容を設定
  cell1.textContent = "鈴木";
  cell2.textContent = "28";
</script>

注意事項

* `insertRow()` メソッドは、`` 要素だけでなく、`` 要素、`` 要素、`` 要素に対しても使用できます。 * インデックスは 0 から始まります。

関連QA

<h2>Q1: insertRow() メソッドを使わずに行を追加することはできますか？</h2> はい、`innerHTML` プロパティを使ってテーブルに新しい行を追加することもできます。ただし、`insertRow()` メソッドを使用する方が、コードが簡潔になり、パフォーマンスも向上する傾向があります。 <h2>Q2: 行のセルにスタイルを設定するにはどうすればよいですか？</h2> セルのスタイルを設定するには、`cell.style` プロパティを使用します。 <pre class="language-html"> // セルの背景色を赤に設定 cell1.style.backgroundColor = "red"; <h2>Q3: 行のセルにクラスを追加するにはどうすればよいですか？</h2> セルのクラスを追加するには、`cell.classList.add()` メソッドを使用します。 <pre class="language-html"> // セルに "my-class" というクラスを追加 cell1.classList.add("my-class");

```