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

html TAB、table生成

news 2025/7/10 3:14:18

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/7/9 11:13:39

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/6 18:33:17

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/7/6 15:26:24

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/7/5 18:24:10

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/7/6 16:08:12

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/7/8 7:55:31

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/7/8 0:02:00

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/7/9 13:11:37

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2025/7/5 18:25:35