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

html TAB、table生成

news 2026/2/9 16:13:58

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/8 4:37:41

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/2/8 10:51:38

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2026/1/23 11:58:06

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2026/1/31 6:53:53