html"><! DOCTYPE html > < head> < metacharset = " UTF-8" > < title> </ 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> < divid = " tabs" > </ div> < divid = " 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 >
