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

html TAB、table生成

news 2025/12/24 22:59:14

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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/12/22 11:13:26

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/12/22 9:49:42

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

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

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

编程新知 2025/12/17 0:14:52

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/12/8 14:57:15

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/12/15 2:28:05

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/12/15 0:46:10

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/12/12 11:33:47

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/11/21 0:25:40

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01