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

html TAB、table生成

news 2026/4/1 13:24:10

1. 代码

<!DOCTYPE html>  
<head>  
<meta charset="UTF-8">  
<title>Dynamic Tabs with Table Data</title>  
<style>  /* 简单的样式 */  .tab-content {  display: none;  border: 10px solid #ccc;  padding: 30px;  margin-top: 30px;  }  .tab-content.active {  display: block;  }  table {  width: 100%;  border-collapse: collapse;  }  th, td {  border: 10px solid #ddd;  padding: 30px;  text-align: left;  }  th {  background-color: #f2f2f2;  }  
</style>  
</head>  
<body>  
<div id="tabs">  <!-- 选项卡头部将在这里动态生成 -->  
</div>  
<div id="tab-contents">  <!-- 选项卡内容（表格）将在这里动态生成 -->  
</div>  <script>  
// 假设这是从后端获取的数据  
const data = {  "fenceNum": 2,  "datasets": [  {  "name": "Dataset 1",  "data": [  { "num1": 1234, "num2": 5678, "status1": "on", "status2": "active" },  // 更多数据...  ]  },  {  "name": "Dataset 2",  "data": [  { "num1": 3456, "num2": 7890, "status1": "off", "status2": "inactive" },  // 更多数据...  ]  }  ]  
};  // 动态生成选项卡头部和内容  
const tabsDiv = document.getElementById('tabs');  
const tabContentsDiv = document.getElementById('tab-contents');  data.datasets.forEach((dataset, index) => {  const tabButton = document.createElement('button');  tabButton.textContent = `Tab ${index + 1} (${dataset.name})`;  tabButton.onclick = () => showTabContent(index);  tabsDiv.appendChild(tabButton);  const tabContent = document.createElement('div');  tabContent.className = 'tab-content';  // 创建表格  const table = document.createElement('table');  const thead = table.createTHead();  const headerRow = thead.insertRow();  ['Num1', 'Num2', 'Status1', 'Status2'].forEach(text => {  let th = document.createElement('th');  th.textContent = text;  headerRow.appendChild(th);  });  const tbody = table.createTBody();  dataset.data.forEach(item => {  let row = tbody.insertRow();  ['num1', 'num2', 'status1', 'status2'].forEach(key => {  let cell = row.insertCell();  cell.textContent = item[key];  });  });  tabContent.appendChild(table);  if (index === 0) tabContent.classList.add('active'); // 默认显示第一个选项卡的内容  tabContentsDiv.appendChild(tabContent);  
});  function showTabContent(index) {  const tabContents = document.querySelectorAll('.tab-content');  tabContents.forEach(tabContent => tabContent.classList.remove('active'));  tabContents[index].classList.add('active');  
}  
</script>  
</body>  
</html>

2.解释

1213
L结构

：这个div用于存放动态生成的选项卡头部（即按钮）。
：这个div用于存放动态生成的选项卡内容（即表格）。 CSS样式 .tab-content：定义了选项卡内容的默认样式，包括隐藏内容（display: none;）、边框、内边距和上边距。 .tab-content.active：当.tab-content元素具有.active类时，它会被显示（display: block;）。 table、th、td：定义了表格及其单元格的样式，包括宽度、边框合并、边框样式、内边距和文本对齐方式。 JavaScript逻辑

数据定义：data对象包含两个数据集（datasets），每个数据集都有一个名称（name）和一个包含多个数据项（data）的数组。每个数据项都有四个属性：num1、num2、status1、status2。

动态生成选项卡头部：遍历data.datasets数组，为每个数据集创建一个按钮（button），按钮的文本内容包含选项卡的编号和数据集的名称。每个按钮都绑定了一个点击事件监听器，当按钮被点击时，会调用showTabContent函数并传入当前选项卡的索引。

动态生成选项卡内容：对于每个数据集，创建一个div元素作为选项卡的内容容器，并为其添加.tab-content类。然后，在这个div内部创建一个表格（table），并动态生成表头和表体。表头（th）根据数据项的属性名（Num1、Num2、Status1、Status2）来设置，表体（td）则根据数据项的实际值来填充。

默认显示第一个选项卡的内容：通过检查索引（index），如果它是第一个数据集（index === 0），则给对应的.tab-content元素添加.active类，使其内容被显示。

显示/隐藏选项卡内容：showTabContent函数负责根据传入的索引来显示对应的选项卡内容，并隐藏其他所有选项卡的内容。它通过查询所有.tab-content元素，移除它们的.active类，然后只给目标索引对应的.tab-content元素添加.active类来实现。

注意事项
在这个例子中，数据是硬编码在JavaScript中的，但在实际应用中，这些数据可能会通过AJAX请求从后端API获取。
表格的列标题（th）使用了大写的属性名（Num1、Num2等），而数据项（item）的键是小写的（num1、num2等）。虽然JavaScript是大小写敏感的，但在这个例子中，由于我们直接通过字符串字面量来访问对象的属性，所以不会出现问题。然而，为了保持一致性，最好确保列标题和数据项键的大小写一致。
默认情况下，只有第一个选项卡的内容是可见的，其他选项卡的内容都是隐藏的。当用户点击不同的选项卡时，相应的内容会被显示，而其他内容会被隐藏。

3. 效果

在这里插入图片描述

相关文章：

html TAB、table生成

1. 代码 <!DOCTYPE html> <head> <meta charset"UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 10px solid #ccc; padding: 30px; mar…...

编程日记 2024/9/26 2:48:30

2024！再见前端！

各位朋友大家晚上好&#xff0c;夜深了&#xff0c;睡不着&#xff0c;想想还是写一篇文章和大家说再见吧&#xff01; 自2014年入行前端以来&#xff0c;满打满算差不多整整十年了&#xff0c;这十年可以说是见证了中国整个互联网的起飞到全盛时期。这期间经历了电商、金融、…...

编程日记 2024/9/26 2:45:28

【源码+文档+调试讲解】人事管理系统设计与实现Python

摘 要 人事管理系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff…...

编程日记 2024/9/26 2:44:27

基于注意力机制的图表示学习：GRAPH-BERT模型

人工智能咨询培训老师叶梓 转载标明出处 图神经网络&#xff08;GNNs&#xff09;在处理图结构数据方面取得了显著的进展&#xff0c;但现有模型在深层结构中存在性能问题&#xff0c;如“悬挂动画问题”和“过平滑问题”。而且图数据内在的相互连接特性限制了大规模图输入的并…...

编程日记 2024/9/26 2:42:24

linux服务器安装原生的php环境

在CentOS上安装原生的PHP环境相对简单。下面是一个详细的步骤指南&#xff0c;适用于CentOS 7及更高版本。 ### 第一步&#xff1a;更新系统 首先&#xff0c;确保你的系统是最新的&#xff1a; sudo yum update -y ### 第二步&#xff1a;安装EPEL和Remi仓库 1. **安装EP…...

编程日记 2024/9/26 2:36:18

数电学习基础（逻辑门电路+）

1.逻辑门电路 1.1逻辑门电路的简介 1.1.1各种逻辑门电路的简介 基本概念 &#xff08;1&#xff09;实现基本逻辑运算和常用逻辑运算的电路称为逻辑门电路&#xff0c;简称门电路。逻辑门电路是组成各种数字电路的基本单元电路。将构成门电路的元器件制作一块半导体芯片上再…...

编程日记 2024/9/26 2:35:17

【艾思科蓝】Spring Boot实战：零基础打造你的Web应用新纪元

第七届人文教育与社会科学国际学术会议&#xff08;ICHESS 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议请看&#xff1a;https://ais.cn/u/nuyAF3 目录 一、Spring Boot简介 1.1 Spring Boot的诞生背景 1.2 Spring Boot的核心特性 二、搭建开发环境 2.1…...

编程日记 2024/9/26 2:34:16

C++ 二叉树

1. 二叉搜索树 1.1 二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;他或者是一棵空树&#xff0c;或者是具有以下性质的二叉树&#xff1a; ①若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 ②若它的右子树不为空&#xff0c;则右子树上所有节…...

编程日记 2024/9/26 2:32:14

初探IT世界：从基础到未来

初探IT世界&#xff1a;从基础到未来 1. 引言 随着科技的不断发展&#xff0c;IT&#xff08;信息技术&#xff09;已经成为全球经济的支柱之一。从软件开发、网络安全到数据分析和人工智能&#xff0c;IT 领域为我们的日常生活提供了许多不可或缺的技术服务。无论你是初学者…...

编程日记 2024/9/26 2:31:13

一区黏菌算法+双向深度学习+注意力机制！SMA-BiTCN-BiGRU-Attention黏菌算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

一区黏菌算法双向深度学习注意力机制&#xff01;SMA-BiTCN-BiGRU-Attention黏菌算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测 目录 一区黏菌算法双向深度学习注意力机制&#xff01;SMA-BiTCN-BiGRU-Attention黏菌算法优化双向时间卷积双向门控循环单元…...

编程日记 2024/9/26 2:27:09

机器翻译之Bahdanau注意力机制在Seq2Seq中的应用

目录 1.创建 添加了Bahdanau的decoder 2. 训练 3.定义评估函数BLEU 4.预测 5.知识点个人理解 1.创建 添加了Bahdanau的decoder import torch from torch import nn import dltools#定义注意力解码器基类 class AttentionDecoder(dltools.Decoder): #继承dltools.Decoder写…...

编程日记 2024/9/26 2:25:08

MyBatis 入门教程-搭建入门工程

Maven作为一个优秀的项目构建和管理工具，在日常的开发中被大多数开发者使用，后续的项目也是基于Maven来构建。 创建一个Maven项目 利用IDEA创建项目工具来创建一个Maven项目 添加MyBatis的依赖 这里可以从Maven仓库地址中进行查看， https://mvnrepository.com/ 从这里可…...

编程日记 2024/9/26 2:22:05

CVE-2024-2389 未经身份验证的命令注入

什么是 Progress Flowmon？ Progress Flowmon 是一种网络监控和分析工具，可提供对网络流量、性能和安全性的全面洞察。Flowmon 将 Nette PHP 框架用于其 Web 应用程序。 未经身份验证的路由 我们开始在“AllowedModulesDecider.php”文件中枚举未经身份验证的端点，这是一个描…...

编程日记 2024/9/26 2:18:52

C++初阶-list用法总结

目录 1.迭代器的分类 2.算法举例 3.push_back/emplace_back 4.insert/erase函数介绍 5.splice函数介绍 5.1用法一&#xff1a;把一个链表里面的数据给另外一个链表 5.2 用法二&#xff1a;调整链表当前的节点数据 6.unique去重函数介绍 1.迭代器的分类 我们的这个迭代器…...

编程日记 2024/9/26 2:17:51

【智能大数据分析 | 实验一】MapReduce实验：单词计数

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…...

编程日记 2024/9/26 2:16:50

Git 版本控制--git restore和git reset

git restore 和 git reset 是 Git 版本控制系统中两个用于撤销更改的命令&#xff0c;但它们的作用范围和用途有所不同。 git restore git restore 是 Git 版本控制系统中的一个命令&#xff0c;用于撤销工作目录中的更改&#xff0c;但不影响暂存区&#xff08;staging area…...

编程日记 2024/9/26 2:15:49

DBAPI如何实现插入数据前先判断数据是否存在，存在就更新，不存在就插入

DBAPI实现数据不存在即插入、存在即更新 场景 往数据库插入数据的时候&#xff0c;需要先判断一下记录是否在数据库已经存在&#xff0c;如果已经存在就更新记录&#xff0c;如果不存在&#xff0c;才插入数据。 实现方案 采用存储过程实现&#xff0c;以mysql为例子 创建存储过…...

编程日记 2024/9/26 2:13:47

【渗透测试】-灵当CRM系统-sql注入漏洞复现

文章目录 概要　　 灵当CRM系统sql注入漏洞&#xff1a;　　 具体实例&#xff1a;　 技术名词解释　 小结 概要 近期灵当CRM系统爆出sql注入漏洞&#xff0c;我们来进行nday复现。 灵当CRM系统sql注入漏洞&#xff1a; Python sqlmap.py -u "http://0.0.0.0:0000/c…...

编程日记 2024/9/26 2:12:46

c语言练习题1（数组和循环）

1实现一个对整形数组的冒泡排序 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法。它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。遍历数列的工作是重复进行的&#xff0c;直到没有再需要交换的元…...

编程日记 2024/9/26 2:11:45

实验3 Hadoop集群运行环境搭建和使用

实验3 Hadoop集群运行环境搭建和使用 一、实验介绍 本节实验旨在引导学生通过实际操作搭建一个基本的Hadoop集群，并进行基本的使用验证。实验包括在集群节点上添加域名映射以实现节点间的相互识别，配置免密SSH登录以便无密码访问各节点，安装和配置JDK以满足Hadoop的运行需求…...

编程日记 2024/9/26 2:09:38

Mermaid Live Editor：用代码绘制专业图表的终极免费工具

Mermaid Live Editor&#xff1a;用代码绘制专业图表的终极免费工具 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-edit…...

编程新知 2026/4/1 13:20:53

别再用FIFO了！AXI4-Stream CDC场景下，寄存器管道(Register Slice)模式实战与避坑

别再用FIFO了&#xff01;AXI4-Stream CDC场景下寄存器管道模式的实战精要 在FPGA和SoC设计中&#xff0c;跨时钟域&#xff08;CDC&#xff09;数据传输一直是个让人头疼的问题。每当遇到不同时钟域间的数据同步&#xff0c;大多数工程师的第一反应就是掏出一个FIFO来解决。这…...

编程新知 2026/4/1 12:54:27

C语言实战：构建嵌入式eMMC RPMB安全读写组件

1. eMMC RPMB分区基础解析 我第一次接触RPMB分区是在开发智能门锁项目时&#xff0c;需要存储指纹特征码等敏感数据。传统存储方式容易被篡改&#xff0c;而RPMB完美解决了这个问题。RPMB&#xff08;Replay Protected Memory Block&#xff09;是eMMC芯片中的特殊安全存储区域…...

编程新知 2026/4/1 12:26:15

世界第一个开源可商用 .NET Office 转 PDF 工具/库 - MiniPdf

一、背景与问题缘起 MySQL 5.6.51 版本下 2000 万行核心业务表开展新增字段操作&#xff0c;需求为新增BIGINT(19) NOT NULL DEFAULT 0 COMMENT 注释&#xff08;因业务实际需要存储大数值关联字段&#xff09;。 表的核心特性为Java 多线程密集读写&#xff0c;业务请求持续…...

编程新知 2026/4/1 12:22:13

FPGA程序部署双通道：JTAG在线调试与SPI Flash固化的工程实践

1. JTAG在线调试&#xff1a;工程师的"手术刀" 第一次用JTAG调试FPGA时&#xff0c;我盯着开发板看了半天——这玩意儿连上电脑就能直接改逻辑&#xff1f;后来才发现它就像给病人做手术时的实时监护仪&#xff0c;能随时观察"患者"状态&#xff0c;但断电…...

编程新知 2026/4/1 11:55:50

Qwen3-14B应用案例：智能客服与内容生成，企业落地实操

Qwen3-14B应用案例&#xff1a;智能客服与内容生成&#xff0c;企业落地实操 1. 为什么选择Qwen3-14B作为企业AI解决方案 在当今企业数字化转型浪潮中&#xff0c;AI技术正从实验室走向实际业务场景。Qwen3-14B作为140亿参数的大型语言模型&#xff0c;在能力与资源消耗之间取…...

编程新知 2026/4/1 10:31:00

Qwen3.5-9B-AWQ-4bit实战教程：用‘概括最重要信息’提示词压缩冗余输出

Qwen3.5-9B-AWQ-4bit实战教程&#xff1a;用"概括最重要信息"提示词压缩冗余输出 1. 认识Qwen3.5-9B-AWQ-4bit模型 Qwen3.5-9B-AWQ-4bit是一个强大的多模态AI模型&#xff0c;它能同时理解图片和文字。想象一下&#xff0c;你给这个AI看一张照片&#xff0c;然后问…...

编程新知 2026/4/1 10:02:29

从零搭建PointRCNN：Linux环境配置与3D检测可视化实战

1. 环境准备&#xff1a;从零搭建Linux深度学习工作站 第一次在Linux系统上配置深度学习环境时&#xff0c;我盯着命令行界面手足无措的样子还历历在目。现在回想起来&#xff0c;其实只要掌握几个关键步骤&#xff0c;就能快速搭建好PointRCNN所需的运行环境。我们以配备NVIDI…...

编程新知 2026/4/1 9:15:36

3个秘诀让城通网盘下载提速10倍：ctfileGet工具全解析

3个秘诀让城通网盘下载提速10倍&#xff1a;ctfileGet工具全解析 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet ctfileGet是一款专注于获取城通网盘直连地址的开源工具&#xff0c;通过本地解析技术帮…...

编程新知 2026/4/1 8:36:40

CVPR 2025新秀OverLoCK上手实测：在COCO数据集上跑目标检测，比MogaNet-B高1% AP是怎么做到的？

OverLoCK实战指南&#xff1a;如何在COCO目标检测任务中超越MogaNet-B 1% AP 计算机视觉领域的主干网络架构正在经历一场静默革命。2025年CVPR最新收录的OverLoCK网络以其创新的"先概览再聚焦"设计理念&#xff0c;在多个视觉任务中展现出惊人的性能突破。本文将带您…...

编程新知 2026/4/1 7:49:43