Table节点的妙用：动态构建20行12列的表格

2023-11-10 14:11:45

JavaScript 动态创建 HTML 表格

在现代网络开发中，JavaScript 已经成为构建交互式网页的重要工具。除了处理用户交互和动画效果之外，JavaScript 还能够动态创建 HTML 元素，从而实现更加灵活的网页布局和内容管理。

在本篇文章中，我们将主要讨论如何使用 JavaScript 动态创建 HTML 表格。表格是网页中常用的元素，可以用来组织和展示数据，非常适用于展示产品信息、用户列表或统计数据等。

首先，我们先来了解一下 HTML 表格的基本结构。一个 HTML 表格包含 <table>、<tr> 和 <td> 三个基本元素，其中 <table> 元素表示表格本身，<tr> 元素表示表中的行，<td> 元素表示表中的列。

代码示例

// 创建一个 table 元素
var table = document.createElement('table');

// 设置 table 元素的属性
table.setAttribute('border', '1');
table.setAttribute('width', '100%');

// 创建表头
var thead = document.createElement('thead');
var tr = document.createElement('tr');
for (var i = 0; i < 12; i++) {
  var th = document.createElement('th');
  th.innerHTML = '列 ' + (i + 1);
  tr.appendChild(th);
}
thead.appendChild(tr);

// 创建表体
var tbody = document.createElement('tbody');
for (var i = 0; i < 20; i++) {
  var tr = document.createElement('tr');
  for (var j = 0; j < 12; j++) {
    var td = document.createElement('td');
    td.innerHTML = '行 ' + (i + 1) + ', 列 ' + (j + 1);
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}

// 将表头和表体添加到 table 元素中
table.appendChild(thead);
table.appendChild(tbody);

// 将 table 元素添加到页面中
document.body.appendChild(table);