原生JavaScript，根据后端返回JSON动态【动态列头、动态数据】生成表格数据
前期准备： JQ下载地址： https://jquery.com/
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JSON动态生成表格数据,动态列头拼接</title><style>table {width: 800px;text-align: center;border-collapse: collapse;}thead tr {height: 40px;background-color: rgb(161, 143, 143);}td,th {padding: 5px;border: 1px solid rgb(80, 73, 73);}</style></head><body><div id="tableContainer"></div></body><!-- 下载地址： https://jquery.com/, 引入Jqurey，需要根据自己的JQ文件修改路径并引入 --><script src="./jquery-3.7.1.min.js"></script><script>function run() {var list = [{line: "line1",station: "stationA",device: "设备1",machine: "line1机台数据"}, {line: "line1",station: "stationB",device: "设备B",machine: "line1机台数据"},{line: "line1",station: "stationA",device: "设备2",machine: "机台数据"}, {line: "line1",station: "stationC",device: "设备C",machine: "line1机台数据"}, {line: "line2",station: "stationC",device: "设备C",machine: "line2机台数据"},{line: "line2",station: "stationA",device: "设备1",machine: "line2机台数据"},{line: "line2",station: "stationA",device: "设备2",machine: ""}, {line: "line3",station: "stationC",device: "设备C",machine: "line3机台数据"}]let column = [{label: '',key: 'station'},{label: '设备',key: 'device'}]let newLine = []let newStation = []for (var i = 0; i < list.length; i++) {let item = list[i]// 线别let lines = findArrIsNow(newLine, item.line)if (!lines) {newLine.push(item.line)}// stationlet stations = findArrIsNow(newStation, item.station)if (!stations) {newStation.push(item.station)}}// 组装头部for (var i = 0; i < newLine.length; i++) {let line = newLine[i]column.push({label: line,key: line})}// 组装数据let dataList = []for (var i = 0; i < newStation.length; i++) {let col = newStation[i]for (var j = 0; j < list.length; j++) {let lsItem = list[j]// 匹配对应的站点if (col === lsItem['station']) {// 查找设备名是否存在let deviceFinds = findObjectArrIsNow(dataList, 'device', lsItem['device'])// 不存在就添加if (!deviceFinds) {let obj = {station: col}obj['device'] = lsItem['device']obj[lsItem['line']] = lsItem['machine']dataList.push(obj)} else {deviceFinds[lsItem['line']] = lsItem['machine']}}}}document.getElementById('tableContainer').innerHTML = createTable(dataList, column, newLine);setTimeout(() => {mergeCell('myTable', [0])}, 500)}// 表格拼接function createTable(dataList, columnList, lineList) {var table = '<table id="myTable" border="1">';// 组装头部let headrs = '<tr>'for (var i = 0; i < columnList.length; i++) {let colTitles = columnList[i]headrs += '<th>' + colTitles.label + '</th>'}headrs += '</tr>';// 组装bodylet bodys = ''for (var i = 0; i < dataList.length; i++) {bodys += '<tr>';for (let tl of columnList) {// 第一列相同站点需要合并，特殊标记处理if (tl.key === 'station') {if (!dataList[i][tl.key]) {bodys += '<td rowspan=""></td>';} else {bodys += '<td rowspan="">' + dataList[i][tl.key] + '</td>';}} else {if (!dataList[i][tl.key]) {bodys += '<td></td>';} else {bodys += '<td>' + dataList[i][tl.key] + '</td>';}}}bodys += '</tr>';}table += headrs + bodystable += '</table>';return table;}// 查找数组对象是否存在 [{...}]function findObjectArrIsNow(list, key, value) {return list.find((fid) => {return fid[key] === value})}// 查找数组里是否存在 ['']function findArrIsNow(list, value) {return list.find((fid) => {return fid === value})}/*** @param tableId table的id* @param cols 需要合并的列*/function mergeCell(tableId, cols) {var table = document.getElementById(tableId);var table_rows = table.rows;cols.forEach(v => { // 需要合并的列的数组for (let i = 0; i < table_rows.length - 1; i++) { // 循环table每一行// rowlet now_row = table_rows[i];let next_row = table_rows[i + 1];// collet now_col = now_row.cells[v];let next_col = next_row.cells[v];if (now_col.innerHTML == next_col.innerHTML) { // 判断内容是否相同$(next_col).addClass('remove'); // 标记为需要删除的列domsetParentSpan(table, i, v);}}})$(".remove").remove();}/*** @param table table的dom* @param row 内容相同行* @param col 内容相同列*/function setParentSpan(table, row, col) {var col_item = table.rows[row].cells[col];if ($(col_item).hasClass('remove')) {setParentSpan(table, --row, col)} else {col_item.rowSpan += 1;}}// 运行run()</script>
</html>
效果图：
相关文章：
原生JavaScript，根据后端返回JSON动态【动态列头、动态数据】生成表格数据
前期准备： JQ下载地址： https://jquery.com/ <!DOCTYPE html> <html><head><meta charset"utf-8"><title>JSON动态生成表格数据,动态列头拼接</title><style>table {width: 800px;text-align: cen…...
OD_2024_C卷_200分_9、园区参观路径【JAVA】【动态规划】
package odjava;import java.util.Scanner;public class 九_园区参观路径 {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt(); // 长 -> 行数int m sc.nextInt(); // 宽 -> 列数int[][] matrix new int[n][m]; // 地图…...
校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序
项目描述： 校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序 功能介绍： 表白墙 卖舍友 步数旅行 步数排行榜 情侣脸 漫画脸 个人主页 私信 站内消息 今日话题 评论点赞收藏 服务器环境要求：PHP7.0 MySQL5.7 效果…...
数据结构小记【Python/C++版】——散列表篇
一，基础概念 散列表，英文名是hash table，又叫哈希表。 散列表通常使用顺序表来存储集合元素，集合元素以一种很分散的分布方式存储在顺序表中。 散列表是一个键值对(key-item)的组合，由键(key)和元素值(item)组成。键…...
前端框架的发展史可以追溯到早期的静态网页时代
前端框架的发展史可以追溯到早期的静态网页时代。以下是前端框架的主要发展阶段： 静态网页时代：在互联网的初期，网页主要由HTML、CSS和JavaScript构成。这些网页是静态的，没有复杂的交互和动态内容。 原生JavaScript时代…...
迷宫可行路径数
题目描述 现有一个n∗m大小的迷宫，其中1表示不可通过的墙壁，0表示平地。每次移动只能向上下左右移动一格（不允许移动到曾经经过的位置），且只能移动到平地上。求从迷宫左上角到右下角的所有可行路径的条数。 输入描述…...
消息队列学习
消息队列是什么 消息队列：Kafka、RocketMQ、RabbitMQ等 腾讯云CMQ消息队列介绍是这么说的： 腾讯云消息队列（Cloud Message Queue，以下简称 CMQ）是分布式的消息队列服务，用于存储进程间传输的消息ÿ…...
API接口技术开发店铺详情接口采集店铺ID、卖家ID、掌柜名字、店铺名、店铺类型、店铺主页、店铺等级、店铺评分、联系方式等数据接入演示
API接口技术开发店铺详情接口采集店铺ID、卖家ID、掌柜名字、店铺名、店铺类型、店铺主页、店铺等级、店铺评分、联系方式等数据，可以按照以下步骤进行接入演示： 注册并获取API密钥： 在电商平台的开发者中心注册账号。创建一个应用࿰…...
ffmpeg maxrate 导致转码输出的内容包含随机性
https://trac.ffmpeg.org/wiki/Limiting%20the%20output%20bitrate 问题 领导提出了一个问题，为什么转码后的视频大小字节数据都不一样，这问到我了，一时语塞。查一下吧，没有什么资料支撑。主动试一下。 尝试 首先尝试一下直接…...
Graphpad Prism10.2.1（395） 安装教程 (含Win/Mac版)
GraphPad Prism GraphPad Prism是一款非常专业强大的科研医学生物数据处理绘图软件，它可以将科学图形、综合曲线拟合（非线性回归）、可理解的统计数据、数据组织结合在一起，除了最基本的数据统计分析外，还能自动生成统…...
Cocos Creator 2d光照
godot游戏引擎是有2d光照的，用起来感觉还是很强大的，不知道他是怎么搞的，有时间看看他们怎么实现的。 之前一直以为cocos社区里面没有2d光照的实现，偶然看到2d实现的具体逻辑，现在整理如下， 一࿱…...
5款好用的AI办公软件，一键轻松制作PPT、视频，提升工作效率！
众所周知，AI 人工智能技术已渗透到生活的方方面面，无论是很多人早已用上的智能音箱、语音助手，还是新近诞生的各种 AI 软件工具，背后都离不开 AI 人工智能技术的加持。 对于各类新生的 AI 软件工具，人们很容易「选边站…...
【MyBatis面试题】
目录 前言 1.MyBatis执行流程。 2.Mybatis是否支持延迟加载？ 3.延迟加载的底层原理知道吗？ 4.Mybatis的一级、二级缓存用过吗？ 5.Mybatis的二级缓存什么时候会清理缓存中的数据？ 总结 前言 本文主要介绍了MyBatis面试题相…...
编程界的圣经：从Scheme到JavaScript构建你的计算思维
文章目录 适读人群目 录 《计算机程序的构造和解释》（Structure and Interpretation of Computer Programs，简记为SICP）是MIT的基础课教材，出版后引起计算机教育界的广泛关注，对推动全世界大学计算机科学技术教育的发…...
智慧城市与智慧乡村：共创城乡一体化新局面
一、引言 随着科技的不断进步和城乡发展的日益融合，智慧城市与智慧乡村的建设已成为推动城乡一体化发展的新引擎。智慧城市利用物联网、大数据、云计算等先进技术，实现城市治理、公共服务、产业发展等领域的智能化；而智慧乡村则借助现代科技…...
蓝桥杯——web(ECharts)
ECharts 初体验 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><script src"echarts.js">&l…...
MySQL数据库在Windows和Linux中由于大小写默认规则不同，出现大小写问题如何解决？
Windows和Linux差异：在Windows上，lower_case_table_names默认为1，而在Linux上，默认值通常为0。因此，在Linux上更改这个设置更常见，以确保与Windows环境的兼容性或实现特定的大小写敏感性需求。 操作系统的大…...
新雀优化算法NOA求解机器人栅格地图最短路径规划，可以自定义地图（提供MATLAB代码）
一、星雀优化算法 星雀优化算法(Nutcracker optimizer algorithm,NOA)由Mohamed Abdel-Basset等人于2023年提出，该算法模拟星雀的两种行为，即：在夏秋季节收集并储存食物，在春冬季节搜索食物的存储位置。CEC2005:星雀优化算法(Nut…...
重塑语言智能未来：掌握Transformer，驱动AI与NLP创新实战
Transformer模型 Transformer是自然语言理解(Natural Language Understanding，NLU)的游戏规则改变者，NLU 是自然语言处理(Natural Language Processing，NLP)的一个子集。NLU已成为全球数字经济中AI 的支柱之一。 Transformer 模型标志着AI 新…...
【Windows】Windows 11无法连接共享打印机
Windows 11无法连接共享打印机 1.在电脑点击winr 键然后输入gpedit.msc进行回车进入本地本地组策略编辑器2.打开本地组策略-管理模板>打印机->找到配置RPC连接设置，打开3.选择“已启用”，将下面连接协议改成“命名管道上的RPC”，搞定。…...
FT62X6电容触摸驱动开发：嵌入式裸机与RTOS双环境实践
1. TAMC_FT62X6 库深度解析：面向嵌入式系统的 FT62X6 电容式触摸屏驱动开发实践1.1 芯片级认知：FT62X6 的硬件本质与工程定位FT62X6 是由敦泰电子（FocalTech Systems）推出的单点/多点电容式触摸控制器，广泛应用于中小尺…...
17层视频叠加实战：用Xilinx Video Mixer IP实现多画面融合的完整配置流程
17层视频叠加实战：Xilinx Video Mixer IP核心配置与性能优化指南 在超高清视频处理领域，多画面融合技术正成为专业视听系统的标配能力。Xilinx Video Mixer IP凭借其17层实时叠加能力，为4K/8K视频墙、AR信息叠加、多源监控等场景提供了硬件级…...
终极指南：3分钟免费实现Axure RP完整中文界面汉化
终极指南：3分钟免费实现Axure RP完整中文界面汉化 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在为Axure RP的英…...
别再傻傻分不清了！GIS里Clip和Mask到底怎么用？附ArcGIS/QGIS实操对比
GIS空间分析实战：Clip与Mask工具的核心差异与操作指南 每次打开GIS软件，面对工具箱里密密麻麻的工具图标，新手总会陷入选择困难——尤其是功能看似相似的Clip和Mask。上周有位林业局的朋友发来求助：他用Clip处理卫星影像后&#x…...
终极指南：如何免费让明日方舟干员成为你的桌面伙伴
终极指南：如何免费让明日方舟干员成为你的桌面伙伴 【免费下载链接】Ark-Pets Arknights Desktop Pets | 明日方舟桌宠 (ArkPets) 项目地址: https://gitcode.com/gh_mirrors/ar/Ark-Pets 想让《明日方舟》中的干员突破次元壁，成为你工作学习时的…...
Android RTMP推流实战：从零搭建Nginx服务器到实现摄像头直播
1. 环境准备：搭建Nginx-RTMP服务器 第一次接触直播服务器搭建时，我对着命令行界面手足无措的样子还历历在目。现在回头看，其实用Nginx搭建RTMP服务器就像组装乐高积木，只要按步骤来就能成功。这里我推荐在Ubuntu系统上操作&#x…...
Alpamayo-R1-10B技术文档精要：env.sh环境变量配置、log轮转策略、内存泄漏防护机制
Alpamayo-R1-10B技术文档精要：env.sh环境变量配置、log轮转策略、内存泄漏防护机制 1. 项目概述 Alpamayo-R1-10B是NVIDIA开发的自动驾驶专用开源视觉-语言-动作(VLA)模型，核心为100亿参数模型，搭配AlpaSim模拟器与Physical AI AV数据集&am…...
TikTok爆火C语言创意：电脑无硬件发无线电，靠谱吗？
一、刷爆TikTok的技术神操作，无硬件也能发无线电？ 2026年3月17日，有一条C语言创意短视频，它刷爆了TikTok，在单日的时候，斩获了10万以上的播放量，以及5万以上的点赞量。并且它登顶了当日C语言创…...
[特殊字符] Nano-Banana GPU算力适配方案：A10/A100/V100显存优化配置表
Nano-Banana GPU算力适配方案：A10/A100/V100显存优化配置表 1. 项目概述 Nano-Banana是一款专为产品拆解和平铺展示风格设计的轻量化文本生成图像系统。该系统深度融合了专属Turbo LoRA微调权重，针对Knolling平铺、爆炸图、产品部件拆解等视觉风格进行…...
ANIMATEDIFF PRO惊艳效果：16帧内头发飘动轨迹、衣料褶皱物理模拟动态呈现
ANIMATEDIFF PRO惊艳效果：16帧内头发飘动轨迹、衣料褶皱物理模拟动态呈现 1. 引言：电影级AI渲染新标杆 想象一下，你只需要输入一段文字描述，就能生成一段16帧的高清动态视频——画面中人物的头发随风飘动，衣料褶皱随…...