html TAB切换按钮变色、自动生成table

news2024/9/25 14:24:40

<!DOCTYPE html>  
<head>  
<meta charset="UTF-8">  
<title>Dynamic Tabs with Table Data</title>  
<style>  
   /* 简单的样式 */    
   .tab-content {    
    display: none;    
    border: 1px solid #ccc;    
    padding: 1px;    
    margin-top: 0px;    
  }    
  .tab-content.active {    
    display: block;    
  }    
  button {  
        margin-right: 0px; /* 添加一些间隔 */  
        background-color: transparent; /* 初始背景色透明 */  
        border: 1px solid #ccc; /* 明确边框样式和颜色 */
        cursor: pointer; /* 鼠标悬停时显示手指形状 */  
        padding: 5px 10px; /* 增加内边距以便点击 */  
  }  
  .active-tab {    
    background-color: rgb(77, 218, 223); /* 选中时背景色变为蓝色 */  
    color: white; /* 文本颜色变为白色，以便在蓝色背景上可见 */
    border-color: rgb(47, 178, 183); /* 更改边框颜色以匹配背景色 */   
  }    
  table {    
    width: 100%;    
    border-collapse: collapse;    
  }    
  th, td {    
    border: 1px solid #ddd;    
    padding: 8px;    
    text-align: left;    
  }    
  th {    
    background-color: #f2f2f2;    
  }  
</style>  
</head>  
<body>  
<div id="tabs">  
  <!-- 选项卡头部将在这里动态生成 -->  
</div>  
<div id="tab-contents">  
  <!-- 选项卡内容（表格）将在这里动态生成 -->  
</div>  
  
<script>  
// 假设这是从后端获取的数据  
const data = {  
  "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 = () => {  
    // 移除所有按钮的.active-tab类  
    const allTabs = document.querySelectorAll('#tabs button');  
    allTabs.forEach(tab => tab.classList.remove('active-tab'));  
    // 为当前点击的按钮添加.active-tab类  
    tabButton.classList.add('active-tab');  
    // 显示对应的选项卡内容  
    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);  
  tabContentsDiv.appendChild(tabContent);  
});  

// 默认显示第一个选项卡的内容和按钮  
if (data.datasets.length > 0) {  
    const firstTabButton = tabsDiv.querySelector('button');  
    firstTabButton.classList.add('active-tab');  
    const firstTabContent = tabContentsDiv.querySelector('.tab-content');  
    firstTabContent.classList.add('active');  
}  
  
function showTabContent(index) {  
  const tabContents = document.querySelectorAll('.tab-content');  
  tabContents.forEach(tabContent => tabContent.classList.remove('active'));  
  tabContents[index].classList.add('active');  
}  
</script>  
</body>  
</html>