JavaScript 学习笔记（十三）Dom创建表格

以下是对“JavaScript 学习笔记（十三）Dom创建表格”的详细讲解：

什么是DOM

DOM（Document Object Model）是一种表示文档结构的方式，它将整个文档看做是一个文档树形结构，树形结构中的每个节点都一个文档对象，节点可以有属性，也可以有子节点。

在Web页面中，DOM树形结构代表了页面的结构，我们可以通过JavaScript来操作DOM来实现对页面的各种操作。

如何创建表格

可以使用DOM动态创建表格，以下是创建表格的步骤：

1. 创建外层元素table

<table></table>

1. 创建表头

<thead>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
</thead>

1. 创建表体

<tbody>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</tbody>

1. 将表头和表体插入到table中

var table = document.createElement('table');
// 创建表头
var thead = document.createElement('thead');
thead.innerHTML = '<tr><th>标题1</th><th>标题2</th><th>标题3</th></tr>';
// 创建表体
var tbody = document.createElement('tbody');
tbody.innerHTML = '<tr><td>内容1</td><td>内容2</td><td>内容3</td></tr><tr><td>内容4</td><td>内容5</td><td>内容6</td></tr>';
// 将表头和表体插入到table中
table.appendChild(thead);
table.appendChild(tbody);

以上是创建表格的详细步骤，可以根据实际需要进行调整。

示例说明

以下是两条创建表格的示例说明：

示例1

需求：创建一个包含10行5列的表格，表格每个单元格内容为该单元格所在的行数和列数之和。

var table = document.createElement('table');
for (var i = 1; i <= 10; i++) {
  var tr = document.createElement('tr');
  for (var j = 1; j <= 5; j++) {
    var td = document.createElement('td');
    td.innerText = i + j;
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

在这个示例中，我们通过循环创建tr和td元素，通过innerText属性设置单元格的内容，最终将整个表格插入到页面中。

示例2

需求：从一个二维数组中创建一个表格，数组中的每个子数组代表表格的一行，子数组的元素代表行中的单元格内容。

var arr = [
  ['标题1', '标题2', '标题3'],
  ['内容1', '内容2', '内容3'],
  ['内容4', '内容5', '内容6']
];
var table = document.createElement('table');
for (var i = 0; i < arr.length; i++) {
  var tr = document.createElement('tr');
  for (var j = 0; j < arr[i].length; j++) {
    var td = document.createElement('td');
    td.innerText = arr[i][j];
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

在这个示例中，我们通过循环遍历二维数组和其中的子数组，创建对应的tr和td元素，最终将整个表格插入到页面中。

以上是关于“JavaScript 学习笔记（十三）Dom创建表格”的详细讲解，希望对你有所帮助。