原生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…...
hadoop报错：HADOOP_HOME and hadoop.home.dir are unset. 解决方法
参考：https://blog.csdn.net/weixin_45735242/article/details/120579387 解决方法 1.下载apache-hadoop-3.1.0-winutils-master 官网下载地址： https://github.com/s911415/apache-hadoop-3.1.0-winutils win配置系统环境： 然后重启idea…...
基于Springboot的高校物品捐赠管理系统（有报告）。Javaee项目，springboot项目。
演示视频： 基于Springboot的高校物品捐赠管理系统（有报告）。Javaee项目，springboot项目。 项目介绍： 采用M（model）V（view）C（controller）三层体系…...
【硬件工程师面经整理29_FPGA】
文章目录 1 nand nor的区别，速度差异的原因？2 nand驱动方式？3 异步信号处理方法4 异步FIFO的深度是如何计算的5 异步复位同步释放的优缺点6 问了FPGA的内部组成？7 LE中查找表的实现原理？8 IOB的主要组成部分࿱…...
Ping工作原理
文章目录 目的ping网络协议 OSIICMP什么是ICMP作用功能报文类型查询报文类型差错报文类型ICMP 在 IPv4 和 IPv6 的封装ICMP 在 IPv4 协议中的封装ICMP 在 IPv6 协议中的封装ICMP 头部日常ping 排除步骤ping 查询报文使用code扩展目的 本文主要是梳理ping的工作原理- 揭开 ICMP…...
python调用jar中java方法 静态类为例
java package test;public class test {// run方法返回当前脚本路径public static String runV1(String s) {return "log: " System.getProperty(s);}}python import jpype from jpype import * import osif __name__ "__main__":print(os.environ[JAV…...
tcp服务器客户端通信（socket编程）
目录 1.编程流程 2.代码演示 2.1 服务器代码 2.2 客户端代码 3.注意 3.1 ping命令 3.2 netstat命令 3.3 为什么memset? 3.4 哪个会阻塞? 3.5 显示连接信息 1.概念 1.1 编程流程 1.2 connect与listen connect方法执行后，会进行三次握手，建立连…...
chatgpt 镜像站汇总
无需登录直接可用的： ChatGPT Web - GPT-3.5-16k免费使用，吐字块，每日20次数，不需要登陆思研AI - 免费时限制每小时6次提问https://chatgpt.nicelinks.site/ - 免费使用频次有限制抱歉，站点已暂停 - 免费由开发者提供A…...
java面试题：为什么 SQL 语句不要过多的 join？
1 考察点 面试官主要想了解面试者对于 SQL 优化的理解以及在实际工作中如何处理 SQL 语句的性能问题。要回答好这个问题，只需要了解 join 操作会带来哪些影响，而这些影响对程序产生什么样的影响就行了。这个问题就是面试官想考察我们是不是平日里善于积…...
JAVA实战开源项目：学生日常行为评分管理系统(Vue+SpringBoot)
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.2.1 登录注册模块2.2.2 用户管理模块2.2.3 评分项目模块2.2.4 评分数据模块2.2.5 数据字典模块 2.3 可行性设计2.4 用例设计2.5 数据库设计2.5.1 整体 E-R 图2.5.2 用户2.5.3 评分项目2.5.4 评分数据2.5.…...
力扣-[700. 二叉搜索树中的搜索]
递归法 确定递归函数的参数和返回值 递归函数的参数传入的就是根节点和要搜索的数值，返回的就是以这个搜索数值所在的节点。 代码如下： public TreeNode searchBST(TreeNode root, int val) 确定终止条件 如果root为空，返回null，…...
Hive-源码分析一条hql的执行过程
一、源码下载 下面是hive官方源码下载地址，我下载的是hive-3.1.3，那就一起来看下吧 https://dlcdn.apache.org/hive/hive-3.1.3/apache-hive-3.1.3-src.tar.gz 二、上下文 <Hive-源码带你看hive命令背后都做了什么>博客中已经讲到了hive命令执行…...
软考71-上午题-【面向对象技术2-UML】-UML中的图2
一、用例图 上午题，考的少；下午题，考的多。 1-1、用例图的定义 用例图展现了一组用例、参与者以及它们之间的关系。 用例图用于对系统的静态用例图进行建模。 可以用下列两种方式来使用用例图： 1、对系统的语境建模；…...
使用hashmap优化时间复杂度，leetcode1577
1577. 数的平方等于两数乘积的方法数 已解答 中等 相关标签 相关企业 提示 给你两个整数数组 nums1 和 nums2 ，请你返回根据以下规则形成的三元组的数目（类型 1 和类型 2 ）： 类型 1：三元组 (i, j, k) ÿ…...
3、设计模式之工厂模式1
工厂模式是什么？ 工厂模式是一种创建者模式，用于封装和管理对象的创建，屏蔽了大量的创建细节，根据抽象程度不同，主要分为简单工厂模式、工厂方法模式以及抽象工厂模式。 简单工厂模式 看一个具体的需求 看一个…...
一个Promise全新API
1. 资讯速览 最近，Promise 新出了一个方法，已经进入 Stage 3 （候选阶段） ，相信很快就能达到 Stage 4 （完成阶段），并在项目中广泛使用。 这个方法就是 Promise.withResolvers。它是…...
【力扣hot100】刷题笔记Day25
前言 这几天搞工作处理数据真是类似我也，还被老板打电话push压力有点大的，还好搞的差不多了，明天再汇报，赶紧偷闲再刷几道题（可恶，被打破连更记录了）这几天刷的是动态规划，由于很成…...
webpack5零基础入门-4使用webpack处理less文件
1.安装less npm install less -D 2.创建less文件 .box{width: 100px;height: 100px;background: red; } 3.引入less文件并打包 执行npx webpack 报错无法识别less文件 4.安装less-loader并配置 npm install less-loader9 -D 这里指定一下版本不然会因为node版本过低报错 …...
Python机器学习预测+回归全家桶，新增TCN，BiTCN，TCN-GRU，BiTCN-BiGRU等组合模型预测...
截止到本期，一共发了4篇关于机器学习预测全家桶Python代码的文章。参考往期文章如下： 1.机器学习预测全家桶-Python，一次性搞定多/单特征输入，多/单步预测！最强模板！ 2.机器学习预测全家桶-Pythonÿ…...
一文了解Cornerstone3D中窗宽窗位的3种设置场景及原理
🔆 引言 在使用Cornerstone3D渲染影像时，有一个常用功能“设置窗宽窗位（windowWidth&windowLevel）”，通过精确调整窗宽窗位，医生能够更清晰地区分各种组织，如区别软组织、骨骼、脑组织等。…...
PCA vs PCoA vs NMDS vs LDA vs t-SNE：5种降维方法的核心差异与应用场景解析
1. 降维方法的基本概念与核心价值 当你面对一个包含数百个特征的数据集时，就像站在一个装满各种调料的厨房里——每个瓶子看起来都很重要，但真正做菜时可能只需要其中几种。这就是降维技术的用武之地，它能帮我们从高维数据的"调料架&quo…...
HarvestText句法分析：依存关系解析与事件三元组抽取的完整指南
HarvestText句法分析：依存关系解析与事件三元组抽取的完整指南 【免费下载链接】HarvestText 文本挖掘和预处理工具（文本清洗、新词发现、情感分析、实体识别链接、关键词抽取、知识抽取、句法分析等），无监督或弱监督方法 项目地…...
如何集成Paper CSS到你的Web项目：从安装到部署的完整流程
如何集成Paper CSS到你的Web项目：从安装到部署的完整流程 【免费下载链接】paper-css Paper CSS for happy printing 项目地址: https://gitcode.com/gh_mirrors/pa/paper-css Paper CSS是一款轻量级的前端打印解决方案，让开发者能够轻松创建可预…...
如何用AntiMicroX解决PC游戏手柄支持难题：5分钟从入门到精通
如何用AntiMicroX解决PC游戏手柄支持难题：5分钟从入门到精通 【免费下载链接】antimicrox Graphical program used to map keyboard buttons and mouse controls to a gamepad. Useful for playing games with no gamepad support. 项目地址: https://gitcode.com…...
轻松修复Kindle电子书封面，让你的图书馆重焕生机
轻松修复Kindle电子书封面，让你的图书馆重焕生机 【免费下载链接】Fix-Kindle-Ebook-Cover A tool to fix damaged cover of Kindle ebook. 项目地址: https://gitcode.com/gh_mirrors/fi/Fix-Kindle-Ebook-Cover 你是否曾经遇到过这样的困扰：Kin…...
Hunyuan-MT-7B翻译模型部署问题排查：启动失败、内存不足解决方案
Hunyuan-MT-7B翻译模型部署问题排查：启动失败、内存不足解决方案 1. 问题概述 部署Hunyuan-MT-7B翻译模型时，最常见的两类问题都与资源分配相关： 启动失败：模型加载过程中报错退出内存不足：推理过程中出现OOM&#…...
HoYo-Glyphs：米哈游游戏架空文字字体库完整指南
HoYo-Glyphs：米哈游游戏架空文字字体库完整指南 【免费下载链接】HoYo-Glyphs Constructed scripts by HoYoverse 米哈游的架空文字 项目地址: https://gitcode.com/gh_mirrors/ho/HoYo-Glyphs 你是否曾经在创作米哈游游戏同人作品时，苦于找不到合…...
nlp_structbert_sentence-similarity_chinese-large持续集成与交付（CI/CD）流水线搭建
nlp_structbert_sentence-similarity_chinese-large持续集成与交付（CI/CD）流水线搭建 你是不是也遇到过这样的场景：团队里几个人一起开发一个AI模型应用，每次有人改了代码，都得手动跑测试、打包镜像、上传、再部署到服…...
codex gpt-5.4 日卡200刀
一、配置 auth.jsonapikey如下：sk-8UvPchGMHwu8E8h7uuzzpk9Zv70SI8SU5cNNSnyy8nnv5mLV二、配置 config.tomlmodel_provider "codexeasy" model "gpt-5.4" model_reasoning_effort "high" disable_response_storage true[model_pr…...
知识表示是什么：为什么人工智能离不开知识表示
人工智能不仅要处理数据，还要理解对象、关系、规则和约束。要做到这一点，系统就不能只保存原始记录，而必须把有关内容组织成机器能够处理的形式，这就是知识表示。知识表示并不是人工智能中的附属技术，而是智能系统建立…...