html TAB、table生成

news2024/11/17 7:48:55

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是大小写敏感的，但在这个例子中，由于我们直接通过字符串字面量来访问对象的属性，所以不会出现问题。然而，为了保持一致性，最好确保列标题和数据项键的大小写一致。
默认情况下，只有第一个选项卡的内容是可见的，其他选项卡的内容都是隐藏的。当用户点击不同的选项卡时，相应的内容会被显示，而其他内容会被隐藏。