Create a table Toggle Strips effect with jQuery in VB.NET
Lets see the step by step demonstration to create toggle strips on a table on mouse hover with JQuery.
You can accomplish toggle strip (zebra strip) effect to make your table more elegant for the user, designers with very little coding using jQuery and CSS properties.
Here is a step by step demonstration to create strips on a table and then have the background of each row will change color when your cursor rolls over them.
In jQuery, the toggle strips effect can be achieved by following statement:
$(document).ready(function ()
{
$("table tr:nth-child(even)").addClass("striped");
});
Code Snippets
<html>
<head>
<title>JQuery Toggle Strips</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("table tr:nth-child(even)").addClass("striped");
});
function swap() {
$('tr').toggleClass('striped');
}
</script>
<style>
body,td
font-size: 10pt;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
width: 428px;
height: 137px;
}
th {
border: 1px outset silver;
background-color: maroon;
color: white;
}
tr {
background-color: white;
margin: 1px;
}
tr.striped {
background-color: yellow;
}
td {
padding: 1px 8px;
}
.style1
{
width: 63px;
}
.style2
{
width: 66px;
}
.style3
{
width: 142px;
}
</style>
</head>
<body>
<body>
<table onmouseover="swap()" onmouseout="swap()"
style="font-family: Verdana; font-size: small">
<tr>
<th style="background-color: #993333">StudentId</th>
<th style="background-color: #993333" class="style3">StudentName</th>
<th class="style1" style="background-color: #993333">ContactNo</th
<th class="style2" style="background-color: #993333">Remarks</th>
</tr>
<tr>
<td>1025</td>
<td class="style3">Ritu Kumar</td>
<td class="style1">111222</td>
<td class="style2">Good</td>
</tr>
<tr>
<td>1156</td>
<td class="style3">Krish Patel</td>
<td class="style1">555666</td>
<td class="style2">Average</td>
</tr>
<tr>
<td>1284</td>
<td class="style3">Divya Khanna</td>}
<td class="style1">444999</td>
<td class="style2">VeryGood</td>
</tr>
<tr>
<td>1545</td>
<td class="style3">Deepak</td>
<td class="style1">888222</td>
<td class="style2">Poor</td>
</tr>
</table>
</body
</html>
End Result
This tutorial definitely help you to understand how to make table striping using JQuery .