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

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

相关推荐
y先森3 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189116 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端