HTML中的table標(biāo)簽是用來(lái)創(chuàng)建表格的,由于表格內(nèi)容通常較多,因此我們會(huì)需要在同一個(gè)頁(yè)面中展示不同的表格。這時(shí)我們就可以利用切換代碼來(lái)實(shí)現(xiàn)展示不同表格的功能。
<table id="table1"> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>張三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>男</td> </tr> </table> <table id="table2" style="display:none"> <tr> <th>國(guó)家</th> <th>語(yǔ)言</th> </tr> <tr> <td>中國(guó)</td> <td>中文</td> </tr> <tr> <td>美國(guó)</td> <td>英語(yǔ)</td> </tr> </table>
代碼中我們創(chuàng)建了兩個(gè)表格,其中第一個(gè)表格的id為"table1",第二個(gè)表格的id為"table2",并為第二個(gè)表格添加了style屬性,將其display設(shè)為none,使其在頁(yè)面中隱藏。接下來(lái),我們需要實(shí)現(xiàn)切換展示的功能,可以通過(guò)點(diǎn)擊按鈕、鏈接等元素觸發(fā)相應(yīng)的事件。
<button onclick="switchTable()">切換表格</button> <script> function switchTable(){ var table1 = document.getElementById("table1"); var table2 = document.getElementById("table2"); if(table1.style.display === "none"){ table1.style.display = "table"; table2.style.display = "none"; }else{ table1.style.display = "none"; table2.style.display = "table"; } } </script>
在代碼中,我們創(chuàng)建了一個(gè)按鈕并添加了onclick事件,使其點(diǎn)擊時(shí)可以執(zhí)行switchTable函數(shù)。在函數(shù)中,我們通過(guò)getElementById方法獲取到表格元素,并判斷其display屬性是否為"none"。如果是,則將其display設(shè)置為"table",并將另一個(gè)表格的display設(shè)為"none",從而實(shí)現(xiàn)表格的切換。在頁(yè)面中添加上述代碼后,我們便可以實(shí)現(xiàn)簡(jiǎn)單的表格切換功能。