JavaScript を使用してテーブルを動的に生成するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用してテーブルを動的に生成するにはどうすればよいですか?

WBOY

リリース： 2023-10-24 10:34:04

オリジナル

1316 人が閲覧しました

如何使用 JavaScript 实现动态生成表格功能？

JavaScript を使用してテーブルを動的に生成するにはどうすればよいですか?

Web 開発では、データを表示したり、データ入力用のフォームを作成したりするためにテーブルがよく使用されます。 JavaScriptを利用することでテーブルを動的に生成する機能を実現でき、データの変更に応じてテーブルの内容を動的に更新することができます。この記事では、JavaScript を使用してテーブルを動的に生成する方法を、具体的なコード例を通して詳しく紹介します。

1. HTML 構造の準備
まず、生成されたテーブルをホストするコンテナを HTML で準備します。例:

<div id="tableContainer"></div>

ログイン後にコピー

2. JavaScript コードの実装
次に、JavaScript を使用してテーブルを動的に生成します。具体的な実装手順は次のとおりです。

テーブルデータの作成
まず、テーブルに表示する必要があるデータを準備する必要があります。既存のデータまたはバックエンドから取得したデータを使用できます。簡単にするために、以下に示すように、まずデモンストレーション用のデータを作成します。次に、動的にテーブルを生成する JavaScript 関数を定義します。具体的な実装コードは次のとおりです。

var tableData = [
  { name: '张三', age: 20, gender: '男' },
  { name: '李四', age: 25, gender: '女' },
  { name: '王五', age: 30, gender: '男' }
];

ログイン後にコピー

動的に生成されたテーブル関数を呼び出す
最後に、ページのロード後など、適切なタイミングでこの関数を呼び出します。データが更新されました。以下に示すように:

function generateTable(tableData) {
  var container = document.getElementById('tableContainer');
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  // 生成表头
  var theadRow = document.createElement('tr');
  for (var key in tableData[0]) {
    var th = document.createElement('th');
    th.appendChild(document.createTextNode(key));
    theadRow.appendChild(th);
  }
  thead.appendChild(theadRow);
  table.appendChild(thead);

  // 生成表格内容
  for (var i = 0; i < tableData.length; i++) {
    var tbodyRow = document.createElement('tr');
    for (var key in tableData[i]) {
      var td = document.createElement('td');
      td.appendChild(document.createTextNode(tableData[i][key]));
      tbodyRow.appendChild(td);
    }
    tbody.appendChild(tbodyRow);
  }
  table.appendChild(tbody);

  container.appendChild(table);
}

ログイン後にコピー