当我们需要在网页上展示表格数据时，生成带有缩进的表格代码可以使代码结构更加清晰、易于阅读。下面是生成带有缩进的表格代码的步骤：

1. 准备数据

首先需要准备数据，可以是从后台服务器获取到的数据，也可以是通过JS数组手动创建的数据。例如，下面是一个JS数组：

// 示例数据
var data = [
  { name: '张三', age: 28, address: '北京' },
  { name: '李四', age: 32, address: '上海' },
  { name: '王五', age: 24, address: '广州' }
];

2. 创建表格

接下来需要在HTML中创建表格元素，并为其添加一个id属性方便后续操作。例如：

<!-- HTML代码示例 -->
<table id="myTable"></table>

3. 生成表头

使用innerHTML在JS中生成表格时，通常先将表头代码生成并保存到一个变量中，然后再将这个变量添加到表格元素中。在表头代码中，可以使用缩进对表格结构进行格式化，使其更加清晰。示例代码如下：

// 生成表头代码
var thead = '<thead>\n';
thead += '  <tr>\n';
thead += '    <th>姓名</th>\n';
thead += '    <th>年龄</th>\n';
thead += '    <th>地址</th>\n';
thead += '  </tr>\n';
thead += '</thead>\n';

// 将表头代码添加到表格中
document.getElementById('myTable').innerHTML = thead;

这样做可以使得表头代码的结构更加清晰易读，同时使得生成的表格代码也更加规范。

4. 生成表格数据

接下来需要生成表格中的数据部分，将每条数据按照表格结构进行排列。可以使用for循环遍历数据，生成每行的代码。由于需要缩进，因此需要注意在每行末尾添加换行符以及缩进符号（例如空格或制表符）。示例代码如下：

// 生成表格数据
var tbody = '<tbody>\n';
for(var i = 0; i < data.length; i++) {
  tbody += '  <tr>\n';
  tbody += '    <td>' + data[i].name + '</td>\n';
  tbody += '    <td>' + data[i].age + '</td>\n';
  tbody += '    <td>' + data[i].address + '</td>\n';
  tbody += '  </tr>\n';
}
tbody += '</tbody>\n';

// 将表格数据添加到表格中
document.getElementById('myTable').innerHTML += tbody;

这段代码采用了for循环遍历数据的方式，根据表格结构生成了每行的代码，并在末尾添加了换行符和缩进符号，使得生成的代码更加规范。

示例说明

下面给出两个示例，帮助理解如何生成带有缩进的表格代码。

示例一：手动创建数据

当数据是手动创建的JS数组时，可以直接使用上述步骤生成带有缩进的表格代码，以示例数据为例，生成结果如下所示：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>24</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

可以看到，生成的表格代码结构清晰，每一行都有适当的缩进，易于阅读和理解。

示例二：从后台服务器获取数据

当数据是从后台服务器获取的时候，可以先使用AJAX方式从服务器端获取到数据，然后根据数据生成表格。示例代码如下：

// 从服务器获取数据
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getData', true);
xhr.onload = function() {
  if(xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);

    // 生成表格
    var table = '<table id="myTable">\n';
    // 生成表头代码
    table += '  <thead>\n';
    table += '    <tr>\n';
    table += '      <th>姓名</th>\n';
    table += '      <th>年龄</th>\n';
    table += '      <th>地址</th>\n';
    table += '    </tr>\n';
    table += '  </thead>\n';
    // 生成表格数据
    table += '  <tbody>\n';
    for(var i = 0; i < data.length; i++) {
      table += '    <tr>\n';
      table += '      <td>' + data[i].name + '</td>\n';
      table += '      <td>' + data[i].age + '</td>\n';
      table += '      <td>' + data[i].address + '</td>\n';
      table += '    </tr>\n';
    }
    table += '  </tbody>\n';
    table += '</table>\n';

    // 将表格添加到页面中
    document.body.innerHTML += table;
  }
};
xhr.send();

这段代码首先发送AJAX请求获取数据，随后根据数据生成表格，并将其添加到页面中。这种方式与手动创建数据的方式类似，不同之处仅在于需要先从服务器获取到数据。

本文链接：http://task.lmcjl.com/news/1068.html