如何使用JavaScript动态创建HTML表格

<table>
  <tr>
    <td>行1，列1td>
    <td>行1，列2td>
  tr>
  <tr>
    <td>行2，列1td>
    <td>行2，列2td>
  tr>
table>

上述示例创建了一个有两行两列的表格。

动态创建表格

使用JavaScript动态创建表格的方式如下：

// 创建表格元素
var table = document.createElement('table');

// 循环创建表格行和列
for (var i = 0; i < rows; i++) {
  // 创建行元素
  var row = document.createElement('tr');

  for (var j = 0; j < columns; j++) {
    // 创建列元素
    var cell = document.createElement('td');
    // 设置单元格文本内容
    cell.textContent = 'Row-' + i + ', Column-' + j;
    // 将列添加到行中
    row.appendChild(cell);
  }

  // 将行添加到表格中
  table.appendChild(row);
}

// 将表格添加到 DOM 中
document.body.appendChild(table);

上述代码创建了一个 rows 行 columns 列的表格，并将其添加到文档中。

可能的搜索关键词

动态创建HTML表格, JavaScript创建表格, 异步创建HTML表格, HTML表格更新, JavaScript操作HTML表格

evasion_68171 资源：107 粉丝：0

+关注