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结构
数据定义：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. 效果
