CSS提供了許多方法來控制HTML表格中的tr元素的顯示和隱藏。其中一個常見的方法是使用CSS選擇器來選擇要隱藏的tr元素并設置為display:none。
table tr.hidden { display: none; }
這個CSS規則選擇表格中擁有.hidden類的所有tr元素,并將它們的display屬性設置為none。這將導致這些tr元素被隱藏并不在表格中顯示。
為要隱藏的tr元素添加.hidden類可以通過JavaScript動態添加或在HTML源代碼中手動添加。例如:
行1列1 |
行2列1 |
行3列1 |
行4列1 |
這個表格中的第2行和第4行都擁有.hidden類,所以它們將被隱藏。
另一種方法是使用JavaScript來控制表格中的tr元素的顯示和隱藏。可以通過添加和刪除CSS類來實現這一點。例如,以下JavaScript代碼將在單擊按鈕時切換表格中所有擁有.hidden類的tr元素的可見性:
function toggleHiddenRows() { var rows = document.getElementsByTagName("tr"); for (var i = 0; i< rows.length; i++) { if (rows[i].classList.contains("hidden")) { rows[i].classList.toggle("show"); } } }
這將為所有擁有.hidden類的tr元素添加.show類,反之亦然。請確保為.show類設置合適的CSS規則以便正確顯示隱藏的行。
總而言之,使用CSS和JavaScript可以輕松地顯示或隱藏HTML表格中的tr元素。
上一篇css ui懸浮特效
下一篇css ul li橫線