Hide table row with javascript

Learn how to dynamically hide table row with a help of javascript! In this tutorial there are two samples:

• How to hide or show entire HTML table on the fly


• How to hide or show row in HTML table

To find more helpful javascript effect tutorials follow the link.

Hide HTML table on the fly with javascript

Demo:

show/hide Table

Simple table	Row 1 Column2
Row 2 Column1	Row 2 Column2

With a clik on link "show/hide Table" entire HTML table is hided or showed. When a link is clicked jscript function elementHideShow with parameter simpleTable which is id of table. Then function elementHideShow hide table if table is showed (display property is block) or show table if table is hided (display property of table is none and become block).

Here is a sample code:

<script language="javascript">
    function elementHideShow(elementToHideOrShow) 
    {
        var el = document.getElementById(elementToHideOrShow);
        if (el.style.display == "block") {

            el.style.display = "none";
        }
        else 
        {
            el.style.display = "block";
        }
    }         
</script>

    <a href="javascript:elementHideShow('simpleTable');">show/hide Table</a>
    
    <table style="width:300px; display:block;" id="simpleTable" border="1">
        <tr>
            <td>
                Simple table</td>
            <td>
                Row 1 Column2</td>

        </tr>
        <tr>
            <td>
                Row 2 Column1</td>
            <td>
                Row 2 Column2</td>

        </tr>      
    </table>

Hide table row with javascipt

Demo:

show/hide Row

Simple table	Row 1 Column2
Row 2 Column1	Row 2 Column2

In this case only table row is hided when a link "show/hide Row" is clicked. When use click this link a function elementHideShow is called with a parameter Row2Column1. This parameter is id of row in a table so entire row in HTML is hided (or showed if a row is already hided).

Here is a code:

<script language="javascript">
    function elementHideShow(elementToHideOrShow) 
    {
        var el = document.getElementById(elementToHideOrShow);
        if (el.style.display == "block") {

            el.style.display = "none";
        }
        else 
        {
            el.style.display = "block";
        }
    }         
</script>

    <a href="javascript:elementHideShow('Row2Column1');">show/hide Row 2</a>
    
    <table border="1">
        <tr style="width:300px; display:block;">
            <td style="width:50%" >
                Simple table</td>
            <td>
                Row 1 Column2</td>
        </tr>
        <tr id="Row2Column1" style="width:300px; display:block;">
            <td style="width:50%">
                Row 2 Column1</td>
            <td>
                Row 2 Column2</td>
        </tr>      
    </table>