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






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

1 comment: