当我们需要在网页上展示表格数据时,生成带有缩进的表格代码可以使代码结构更加清晰、易于阅读。下面是生成带有缩进的表格代码的步骤:
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请求获取数据,随后根据数据生成表格,并将其添加到页面中。这种方式与手动创建数据的方式类似,不同之处仅在于需要先从服务器获取到数据。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript生成带有缩进的表格代码 - Python技术站