Question

Without Jquery or any JavaScript library i need to hide the rows of a simple html table except for the table head on page load.

Answer 1

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

Just kidding. Here we go:

<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>

I think a table requires rows, won’t display with just headers.. I could suggest adding a blank row at the start of the table, and changing “i” in the for loop to 1. That way the first row should be skipped.

HTH
Marko