Masquer les lignes de table sauf la tête

Question

Sans Jquery ou une bibliothèque JavaScript, j'ai besoin de masquer les lignes d'une simple table html à l'exception de la tête de la table lors du chargement de la page.

Answer 1

<style type="text/css"> 
.mytable tr { 
    display: none; 
} 
</style> 

Just kidding. Ici, nous allons:

<table border="1" id="mytable"> 
<th> 
    <td>asd</td> 
    <td>asd</td> 
</th> 
<tr> 
    <td>asdkjas</td> 
    <td>asdasdjwa</td> 
</tr> 
<tr> 
    <td>asdkjas</td> 
    <td>asdasdjwa</td> 
</tr> 
</table> 

<script type="text/javascript"> 
window.onload=function(){ 
    hideTableRows(); 
} 
function hideTableRows() { 
    var myTableRows = document.getElementById("mytable").getElementsByTagName("tr"); 
    for(i=0;i< myTableRows.length;i++) { 
     myTableRows[i].style.display = "none"; 
    } 
} 
</script> 

Je pense une table nécessite des lignes, ne sera pas affiché avec seulement les en-têtes .. Je pourrais suggérer d'ajouter une ligne vide au début de la table, et le changement « i » dans la boucle à 1. De cette façon, la première rangée devrait être ignorée.

HTH Marko

Answer 2

Pas besoin particulier de recourir à javascript, vous pouvez faire le tour par CSS aussi:

#table_id tr 
{ 
    display:none; 
} 

Cela devrait cacher tout TRs pas TH.

Answer 3

si votre tableau est correctement balisé. Vous pouvez faire quelque chose comme:

document.getElementById('yourtable') 
     .getElementsByTagName('tbody')[0] 
     .style.display = 'none'; 

Ensuite, mettez cela sur un « onload » événement

Vous pouvez aussi le faire en CSS + Javascript en définissant une classe mondiale .js à votre balise, puis utiliser les CSS sélecteur.

html.js #yourtable tbody 
{ 
    display: none; 
}