Show/Hide Table Border using jQuery

Here’s a simple and concise way to display or hide a Table Border using jQuery. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Show/Hide Table Border</title>
    <style type="text/css">
    .tblWoBorder{
        border:none;
    }
    .tblWithBorder{    
        border: solid 2px blue;
    }
    </style>
    <script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            $("#cb1").click(function() {
                $("#tbl").toggleClass('tblWithBorder');
            });
        });
    </script>
</head>
<body>
    <input id="cb1" type="checkbox" />
    <label for="cb1">Show/Hide Table Border</label>
    <br /><br />
   
    <table id="tbl" class="tblWoBorder">
        <tr>
            <td>R1C1</td>
            <td>R1C2</td>
            <td>R1C3</td>
        </tr>
        <tr>
            <td>R2C1</td>
            <td>R2C2</td>
            <td>R2C3</td>
        </tr>           
    </table>
</body>
</html>

This code makes use of the jQuery toggleClass that adds/removes one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument. In our case, the toggleClass toggles between the tblWoBorder and the tblWithBorder classes.

Live Demo

1 comment: