当前位置： 首页 > news >正文

原生JavaScript，根据后端返回扁平JSON动态【动态列头、动态数据】生成表格数据

news 2026/2/10 22:23:20

前期准备： 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>

效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/27ffb12a0bce4c08a4457c754128fd29.png

相关文章：

原生JavaScript，根据后端返回扁平JSON动态【动态列头、动态数据】生成表格数据

前期准备&#xff1a; JQ下载地址&#xff1a; https://jquery.com/ <!DOCTYPE html> <html><head><meta charset"utf-8"><title>JSON动态生成表格数据,动态列头拼接</title><style>table {width: 800px;text-align: cen…...

编程日记 2024/3/12 10:28:36

hadoop报错：HADOOP_HOME and hadoop.home.dir are unset. 解决方法

参考&#xff1a;https://blog.csdn.net/weixin_45735242/article/details/120579387 解决方法 1.下载apache-hadoop-3.1.0-winutils-master 官网下载地址&#xff1a; https://github.com/s911415/apache-hadoop-3.1.0-winutils win配置系统环境&#xff1a; 然后重启idea…...

编程日记 2024/3/12 10:27:35

基于Springboot的高校物品捐赠管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的高校物品捐赠管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…...

编程日记 2024/3/12 10:25:33

【硬件工程师面经整理29_FPGA】

文章目录 1 nand nor的区别&#xff0c;速度差异的原因&#xff1f;2 nand驱动方式&#xff1f;3 异步信号处理方法4 异步FIFO的深度是如何计算的5 异步复位同步释放的优缺点6 问了FPGA的内部组成&#xff1f;7 LE中查找表的实现原理&#xff1f;8 IOB的主要组成部分&#xff1…...

编程日记 2024/3/12 10:22:30

Ping工作原理

文章目录 目的ping网络协议 OSIICMP什么是ICMP作用功能报文类型查询报文类型差错报文类型ICMP 在 IPv4 和 IPv6 的封装ICMP 在 IPv4 协议中的封装ICMP 在 IPv6 协议中的封装ICMP 头部日常ping 排除步骤ping 查询报文使用code扩展目的 本文主要是梳理ping的工作原理- 揭开 ICMP…...

编程日记 2024/3/12 10:17:25

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…...

编程日记 2024/3/12 10:14:22

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方法执行后&#xff0c;会进行三次握手&#xff0c;建立连…...

编程日记 2024/3/12 10:10:17

chatgpt 镜像站汇总

无需登录直接可用的&#xff1a; ChatGPT Web - GPT-3.5-16k免费使用&#xff0c;吐字块&#xff0c;每日20次数&#xff0c;不需要登陆思研AI - 免费时限制每小时6次提问https://chatgpt.nicelinks.site/ - 免费使用频次有限制抱歉&#xff0c;站点已暂停 - 免费由开发者提供A…...

编程日记 2024/3/12 10:08:15

java面试题：为什么 SQL 语句不要过多的 join？

1 考察点 面试官主要想了解面试者对于 SQL 优化的理解以及在实际工作中如何处理 SQL 语句的性能问题。要回答好这个问题&#xff0c;只需要了解 join 操作会带来哪些影响&#xff0c;而这些影响对程序产生什么样的影响就行了。这个问题就是面试官想考察我们是不是平日里善于积…...

编程日记 2024/3/12 10:07:14

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.…...

编程日记 2024/3/12 10:06:13

力扣-[700. 二叉搜索树中的搜索]

递归法 确定递归函数的参数和返回值 递归函数的参数传入的就是根节点和要搜索的数值&#xff0c;返回的就是以这个搜索数值所在的节点。 代码如下&#xff1a; public TreeNode searchBST(TreeNode root, int val) 确定终止条件 如果root为空&#xff0c;返回null&#xff0c…...

编程日记 2024/3/12 10:05:11

Hive-源码分析一条hql的执行过程

一、源码下载 下面是hive官方源码下载地址&#xff0c;我下载的是hive-3.1.3&#xff0c;那就一起来看下吧 https://dlcdn.apache.org/hive/hive-3.1.3/apache-hive-3.1.3-src.tar.gz 二、上下文 <Hive-源码带你看hive命令背后都做了什么>博客中已经讲到了hive命令执行…...

编程日记 2024/3/12 10:02:08

软考71-上午题-【面向对象技术2-UML】-UML中的图2

一、用例图 上午题&#xff0c;考的少&#xff1b;下午题&#xff0c;考的多。 1-1、用例图的定义 用例图展现了一组用例、参与者以及它们之间的关系。 用例图用于对系统的静态用例图进行建模。 可以用下列两种方式来使用用例图&#xff1a; 1、对系统的语境建模&#xff1b…...

编程日记 2024/3/12 10:01:07

使用hashmap优化时间复杂度，leetcode1577

1577. 数的平方等于两数乘积的方法数 已解答 中等 相关标签 相关企业 提示 给你两个整数数组 nums1 和 nums2 &#xff0c;请你返回根据以下规则形成的三元组的数目&#xff08;类型 1 和类型 2 &#xff09;&#xff1a; 类型 1&#xff1a;三元组 (i, j, k) &#xff…...

编程日记 2024/3/12 10:00:06

3、设计模式之工厂模式1

工厂模式是什么&#xff1f;     工厂模式是一种创建者模式&#xff0c;用于封装和管理对象的创建&#xff0c;屏蔽了大量的创建细节&#xff0c;根据抽象程度不同&#xff0c;主要分为简单工厂模式、工厂方法模式以及抽象工厂模式。 简单工厂模式 看一个具体的需求 看一个…...

编程日记 2024/3/12 9:59:04

一个Promise全新API

1. 资讯速览 最近&#xff0c;Promise 新出了一个方法&#xff0c;已经进入 Stage 3 &#xff08;候选阶段&#xff09; &#xff0c;相信很快就能达到 Stage 4 &#xff08;完成阶段&#xff09;&#xff0c;并在项目中广泛使用。 这个方法就是 Promise.withResolvers。它是…...

编程日记 2024/3/12 9:58:03

【力扣hot100】刷题笔记Day25

前言 这几天搞工作处理数据真是类似我也&#xff0c;还被老板打电话push压力有点大的&#xff0c;还好搞的差不多了&#xff0c;明天再汇报&#xff0c;赶紧偷闲再刷几道题&#xff08;可恶&#xff0c;被打破连更记录了&#xff09;这几天刷的是动态规划&#xff0c;由于很成…...

编程日记 2024/3/12 9:55:00

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版本过低报错 …...

编程日记 2024/3/12 9:53:59

Python机器学习预测+回归全家桶，新增TCN，BiTCN，TCN-GRU，BiTCN-BiGRU等组合模型预测...

截止到本期&#xff0c;一共发了4篇关于机器学习预测全家桶Python代码的文章。参考往期文章如下&#xff1a; 1.机器学习预测全家桶-Python&#xff0c;一次性搞定多/单特征输入&#xff0c;多/单步预测&#xff01;最强模板&#xff01; 2.机器学习预测全家桶-Python&#xff…...

编程日记 2024/3/12 9:51:57

一文了解Cornerstone3D中窗宽窗位的3种设置场景及原理

&#x1f506; 引言 在使用Cornerstone3D渲染影像时&#xff0c;有一个常用功能“设置窗宽窗位&#xff08;windowWidth&windowLevel&#xff09;”&#xff0c;通过精确调整窗宽窗位&#xff0c;医生能够更清晰地区分各种组织&#xff0c;如区别软组织、骨骼、脑组织等。…...

编程日记 2024/3/12 9:47:54

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2026/2/6 5:51:15

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2026/2/10 3:26:53

ffmpeg（三）：处理原始数据命令

FFmpeg 可以直接处理原始音频和视频数据&#xff08;Raw PCM、YUV 等&#xff09;&#xff0c;常见场景包括&#xff1a; 将原始 YUV 图像编码为 H.264 视频将 PCM 音频编码为 AAC 或 MP3对原始音视频数据进行封装&#xff08;如封装为 MP4、TS&#xff09; 处理原始 YUV 视频…...

编程新知 2025/10/5 16:18:49