html TAB切换按钮变色、自动生成table--使用函数优化结构

news2024/11/20 23:40:01

<!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" },  
        // 更多数据...  
      ]  
<!DOCTYPE html>  
<html lang="en">  
<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" },  
        // 更多数据...  
      ]  
    }  
  ]  
}; 
  
function toggleTab(button, index) {  
    const allTabs = document.querySelectorAll('#tabs button');  
    allTabs.forEach(tab => tab.classList.remove('active-tab'));  
    button.classList.add('active-tab');  
    showTabContent(index);  
}  
  
function showTabContent(index) {  
    const tabContents = document.querySelectorAll('.tab-content');  
    tabContents.forEach(tabContent => tabContent.classList.remove('active'));  
    tabContents[index].classList.add('active');  
}  
  
function createTable(data) {  
    const table = document.createElement('table');  
    const thead = table.createTHead();  
    const headerRow = thead.insertRow();  
    ['Num1', 'Num2', 'Status1', 'Status2'].forEach(text => {  
        const th = document.createElement('th');  
        th.textContent = text;  
        headerRow.appendChild(th);  
    });  
    const tbody = table.createTBody();  
    data.forEach(item => {  
        const row = tbody.insertRow();  
        ['num1', 'num2', 'status1', 'status2'].forEach(key => {  
            const cell = row.insertCell();  
            cell.textContent = item[key];  
        });  
    });  
    return table;  
}  
  
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 = () => toggleTab(tabButton, index);  
    tabsDiv.appendChild(tabButton);  
  
    const tabContent = document.createElement('div');  
    tabContent.className = 'tab-content';  
    const table = createTable(dataset.data);  
    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');  
}  
</script>  
</body>  
</html>