table组件,前端如何使用table组件,打印数组数据,后端传输的数据应该如何打印

一、如何使用table,将数组数据打印出来

后端传来的数据,很大概率是一个List数组,我们必须用一个table组件,来打印这些数据。

table标签的介绍

在HTML中,table是常用组件之一,主要用来打印数组信息。

它的标签定义为:

table标签

复制代码
组件顶级标签,用于定义组件,常用属性:
align:定义内部信息的排列,常使用center,表示中心。
border:定义单元之间的间隔,如果没有,那么就不太好看。

th标签

复制代码
组件的列头标签,相当于列名。
在th标签里写的信息,就是列名。

tb标签

复制代码
组件的数据标签,数据在此展示。
一般来说,这里是动态展示的关键点。
属性:
id:标识组件,方便在函数中修改数据。

二、table标签代码示例:

代码段、效果展示

html 复制代码
<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属性

html 复制代码
<tb id="name"></tb>

至此,我们就可以在script脚本中,使用document对象的方法getElementById,来得到tbody组件,旋即操作它。

第二步,写函数操作tbody

假设,在HTML定义的页面中,有一按钮btn,我们为其设定点击onclick事件。

html 复制代码
<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结构的文本。

比如下面这段代码:
html 复制代码
	<head id="h1">
		<meta charset="utf-8">
		<title>你好</title>
	</head>

head组件的innerHTML属性,存放的值就是:

java 复制代码
		meta charset="utf-8">
		<title>你好</title>

当修改innerHTML属性时,相当于覆盖原有数据。

我是蚊子码农,如有补充或者疑问,欢迎在评论区留言。个人的知识体系可能没有那么完善,希望各位多多指正,谢谢大家。

相关推荐
uhakadotcom23 分钟前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom27 分钟前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom29 分钟前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom38 分钟前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom1 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI2 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室2 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼2 小时前
Nuxt3能上生产吗?
前端