TypeScriptを使用してHTMLテーブルに行を追加する方法

1. HTMLテーブルの作成: まず、HTMLにテーブルを作成します。以下は例です:

<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </tbody>
</table>

2. TypeScriptコードの作成: 次に、TypeScriptファイルを作成し、テーブルに行を追加するコードを書きます。以下は例です:

function appendRow() {
  const table = document.getElementById('myTable') as HTMLTableElement;
  const tbody = table.getElementsByTagName('tbody')[0];

  const newRow = tbody.insertRow();
  const cell1 = newRow.insertCell();
  const cell2 = newRow.insertCell();

  cell1.innerHTML = '新しいデータ1';
  cell2.innerHTML = '新しいデータ2';
}

3. ボタンの追加とイベントリスナーの設定: HTMLにボタンを追加し、ボタンがクリックされたときにappendRow関数を呼び出すようにします。以下は例です:

<button onclick="appendRow()">行を追加</button>

これで、ボタンがクリックされると新しい行がテーブルに追加されます。

以上が、TypeScriptを使用してHTMLテーブルに行を追加する方法です。これにより、テーブルの内容を動的に変更することができます。必要に応じて、上記のコードを変更してさまざまなカラムやデータを持つより複雑なテーブルを作成することもできます。