原生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）”，通过精确调整窗宽窗位，医生能够更清晰地区分各种组织，如区别软组织、骨骼、脑组织等。…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...