CODEWITHSUNDEEP
javascripthtmlcss
arindrajit
arindrajit

Reputation: 76

Show and hide table based on checkbox selection not working

I have a test code block through which I am trying to display a table based on a checkbox selection. The action is working and the table is being displayed. The only problem is - there are no borders. Could you please give me suggestions on what I am doing wrong here?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <table border="1">
                    <tr>
                    <td style=min-width:50px></td>
                    <td style=min-width:50px>Retrofit</td>
                    <td style=min-width:50px><input style=min-width:50px id="retrofit" name="retrofit" type="checkbox" value="1" onchange="javascript:toggleOtherTextboxVisible()" /></td>

       </tr>
        </table>
        <table style="display:none" name="table" id ='table' border="1"/>
        <th>new</th>
        <th>newer</th>
        </table>    
</body>

    <script type="text/javascript">
    function toggleOtherTextboxVisible()
    {
        var check = document.getElementById('retrofit');
        if (check.checked) {
            document.getElementById('table').style.display. = 'block';
        }
        else
        {
            document.getElementById('table').style.display = 'none';
        }                
    }
</script>
</html>

Upvotes: 1

Views: 33

Answers (1)

Jake
Jake

Reputation: 1438

The first error I can see is that a table doesn't have a display value of "block" but "table".

Therefore, simply change this line :

document.getElementById('table').style.display. = 'block';

To :

document.getElementById('table').style.display. = 'table';

Upvotes: 1

Related Questions