html"><! 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> javascript">
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 = ( ) => {
const allTabs = document. querySelectorAll ( '#tabs button' ) ;
allTabs. forEach ( tab => tab. classList. remove ( '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 >