一、如何使用table，将数组数据打印出来
后端传来的数据，很大概率是一个List数组，我们必须用一个table组件，来打印这些数据。
table标签的介绍
在HTML中，table是常用组件之一，主要用来打印数组信息。
它的标签定义为:
table标签：
组件顶级标签，用于定义组件，常用属性：
align：定义内部信息的排列，常使用center，表示中心。
border：定义单元之间的间隔，如果没有，那么就不太好看。
th标签：
组件的列头标签，相当于列名。
在th标签里写的信息，就是列名。
tb标签：
组件的数据标签，数据在此展示。
一般来说，这里是动态展示的关键点。
属性：
id：标识组件，方便在函数中修改数据。
二、table标签代码示例：
代码段、效果展示
<table align="center" border="1"><th>用户id</th><th>用户名</th><th>用户消费</th><tb><tr><td>1</td><td>小明</td><td>350</td></tr><tr><td>2</td><td>小李</td><td>202</td></tr><tr><td>3</td><td>南极人</td><td>3000</td></tr></tb>
</table>
分割线
| 用户id | 用户名 | 用户消费 |
|---|---|---|
| 1 | 小明 | 350 |
| 2 | 小李 | 202 |
| 3 | 南极人 | 3000 |
三、将后端传来的数组数据，打印成表格【效果如上】
第一步，命名tbody。
在下面的tb标签中，加上id属性
<tb id="name"></tb>
至此，我们就可以在script脚本中，使用document对象的方法getElementById，来得到tbody组件，旋即操作它。
第二步，写函数操作tbody
假设，在HTML定义的页面中，有一按钮btn，我们为其设定点击onclick事件。
<script>var btn = document.getElementById("btn");btn.onclick = function(){// 写调用后端的方法，我是用fetch演示的，也可以用ajax等。fetch("http://127.0.0.1:8080/方法名", options).then(response => {// 处理返回值，如果不用验证返回格式、返回数据量等信息，可以像我这样写return response.json();}).then(data => {// 调用真正的方法showData(data);});// 展示数据function showData(data) {var tb = document.getElementById("table_body");// 清空原数据【innerHTML很重要的属性，待会讲】tb.innerHTML="";for (var i = 0; i < data.length; i++) {const row = document.createElement('tr');// innerHTML，里面存放的，就是这个组件中真正的HTML文本，不过要用``括号引注row.innerHTML = `<td>${data[i].realData}</td>`;tb.appendChild(row);};}
</script>
第三步，展示效果
原先的数据如下：
分割线
点击后得到的数据：
分割线
四、innerHTML详解
如果学习过Java，我们会知道类这个概念。
一个类里，会有属性、方法两种元素。
在浏览器中，一个组件，实际上可以理解为一个对象。
而innerHTML，就是这个对象的属性之一。
innerHTML属性，里面存放着HTML结构的文本。
比如下面这段代码：
<head id="h1"><meta charset="utf-8"><title>你好</title></head>
head组件的innerHTML属性，存放的值就是：
meta charset="utf-8"><title>你好</title>
当修改innerHTML属性时，相当于覆盖原有数据。
我是蚊子码农，如有补充或者疑问，欢迎在评论区留言。个人的知识体系可能没有那么完善，希望各位多多指正，谢谢大家。
![[AI资讯·0612] AI测试高考物理题，最高准确率100%，OpenAI与苹果合作，将ChatGPT融入系统中，大模型在物理领域应用潜力显现](https://img-blog.csdnimg.cn/img_convert/3e1a115eb5bdf936d198273db44dc9bf.png)
