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

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

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

    table标签的介绍

    在HTML中，table是常用组件之一，主要用来打印数组信息。
    它的标签定义为:

    table标签：

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

    th标签：

    组件的列头标签，相当于列名。
在th标签里写的信息，就是列名。

    tb标签：

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

    二、table标签代码示例：

    代码段、效果展示

    <table align="center" border="1">
    <th>用户idth>
    <th>用户名th>
    <th>用户消费th>
    <tb><tr>
            <td>1td>
            <td>小明td>
            <td>350td>
        tr>
        <tr>
            <td>2td>
            <td>小李td>
            <td>202td>
        tr>
        <tr>
            <td>3td>
            <td>南极人td>
            <td>3000td>
    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 = `${data[i].realData}`;
                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属性时，相当于覆盖原有数据。

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

  • 相关阅读:
    机械转码日记【23】模板进阶
    一文搞懂用户登录验证流程（附图）
    SQL删除状态未变化的连续数据,只保留状态变化的第一条数据
    【Redis学习笔记】第七章 Redis事务
    姿态分析开源工具箱MMPose使用示例：2d手势估计
    CSDN最新产品云IDE产品测评——让你用一次就爱上云IDE（含教程）
    大厂linux运维面试题库（一）
    小米路由器如何设置去广告功能，如何设置小米路由器的自定义Hosts（小米路由器如何去除小米广告、去除小米电视盒子开屏广告、视频广告）
    简单说说ConcurrentHashMap的结构和实现
    ABAQUS 求解应力强度因子
  • 原文地址：https://blog.csdn.net/weixin_62411896/article/details/139663440