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属性时,相当于覆盖原有数据。

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

相关推荐
我要洋人死几秒前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人12 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人13 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR18 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香20 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969323 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai28 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91537 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#