html TAB、table生成

1. 代码

html 复制代码
<!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. 效果

相关推荐
青皮桔28 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺28 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear31 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息33 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月35 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201839 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿39 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘40 分钟前
vue文本插值
javascript·vue.js·ecmascript
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp