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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

1 comment: