JavaScriptテーブルに行を追加

Web 開発では、テーブルは一般的な要素です。テーブルは、データの表示、データ分析と視覚化の実行などに使用できます。データが動的に変化する場合、テーブルに新しいデータ行を継続的に追加する必要がある場合があります。 JavaScript では、次の方法でテーブルの行を動的に追加できます。

準備

テーブル行を追加する JavaScript コードの作成を開始する前に、HTML ファイルでテーブルの基本構造を定義する必要があります。例:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

この例では、2 つのテーブル行を含むテーブルを定義し、それに id 属性を割り当てて、JavaScript で対応するデータを取得します。

DOM 操作を通じてテーブル行を追加する

DOM 操作を通じてテーブル行を追加できます。具体的には、まずテーブル要素を取得し、次にテーブル行要素を作成し、その行をテーブルの tbody 要素に追加する必要があります。

// 获取表格元素
const table = document.getElementById('myTable');

// 创建新的表格行
const newRow = document.createElement('tr');

// 创建新的表格单元格并添加文本内容
const nameCell = document.createElement('td');
nameCell.textContent = 'Tom';
newRow.appendChild(nameCell);

const ageCell = document.createElement('td');
ageCell.textContent = '35';
newRow.appendChild(ageCell);

const cityCell = document.createElement('td');
cityCell.textContent = 'Chicago';
newRow.appendChild(cityCell);

// 将新的行添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.appendChild(newRow);

この例では、まず ID myTable を持つテーブル要素を取得し、次に新しいテーブル行要素を作成し、テキスト コンテンツを追加します。最後に、テーブルの tbody 要素を取得し、そこに新しいテーブル行を追加します。

innerHTML を使用してテーブル行を追加する

DOM 操作を通じてテーブル行を追加するだけでなく、innerHTML 属性を使用してテーブル データの行をすばやく追加することもできます。具体的には、新しいテーブルの行データを HTML 文字列に書き込み、その文字列をテーブルの innerHTML 属性に割り当てることができます。

// 获取表格元素
const table = document.getElementById('myTable');

// 定义新的表格行HTML字符串
const newRowHtml = '<tr><td>Tom</td><td>35</td><td>Chicago</td></tr>';

// 将HTML字符串添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.innerHTML += newRowHtml;

この例では、まず ID myTable を持つテーブル要素を取得し、次に新しいテーブル行の HTML 文字列を定義します。最後に、テーブルの tbody 要素を取得し、テーブル行の HTML 文字列をそれに追加します。

結論

JavaScript では、DOM 操作または innerHTML 属性を通じてテーブル行を追加できます。実際の開発では、状況に応じてこれらの方法のいずれかを使用する必要があります。どの方法を使用する場合でも、最初にテーブル要素を取得し、テーブルの HTML 構造とデータ形式が正しいことを確認する必要があります。テーブルの構造とデータを定期的にチェックすることで、コード内のエラーやデータ エラーを回避できます。

以上がJavaScriptテーブルに行を追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。