In this article, I will show how to implement zebra stripes
in a table with JQuery.
If you are complete new to JQuery, Then refer the JQuery Quick Start
This gives you basic understanding of JQuery.
Simple Steps are,
1) Creating simple html table with some static data.
2) Add css styles to give better look and feel to the table.
3) Add JQuery, to get different color to all add odd rows of a table.
1) Creating simple html table with some static data :
Here in my example I have a customer JSON object with sample data,
customer.json
[
{
"firstName": "David",
"lastName": "Ronald",
"age": 24,
"address": "21 2nd Street, New York",
"phoneNumber": "212 555-1234"
},
{
"firstName": "Stuart",
"lastName": "Adamson",
"age": 34,
"address": "21 2nd Street, Oakland, CA",
"phoneNumber": "432 432-4543"
},
{
"firstName": "Smith",
"lastName": "John",
"age": 44,
"address": "18 3nd Street, Australia",
"phoneNumber": "321 432-3213"
},
{
"firstName": "Peter",
"lastName": "Saharan",
"age": 64,
"address": "45 5nd Street, Oakland, CA",
"phoneNumber": "124 434-3213"
},
]
I am displaying JSON object data.
Source code is Here,
jquery_zebra_stripes.html
<html>
<head>
<title>Jquery table rows as Zebra Strips</title>
</head>
<body>
<table>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>age</th>
<th>address</th>
<th>phoneNumber</th>
</tr>
<tr>
<td>David</td>
<td>Ronald</td>
<td>24</td>
<td>21 2nd Street, New York</td>
<td>212 555-1234</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
<td>44</td>
<td>18 3nd Street, Australia</td>
<td>321 432-3213</td>
</tr>
<tr>
<td>David</td>
<td>Ronald</td>
<td>24</td>
<td>21 2nd Street, New York</td>
<td>212 555-1234</td>
</tr>
<tr>
<td>Peter</td>
<td>Saharan</td>
<td>64</td>
<td>45 5nd Street, Oakland, CA</td>
<td>124 434-3213</td>
</tr>
</table>
</body>
</html>
Out Put :
2) Add css styles to give better look and feel to the table :
Add some css styles to table, I am adding given css styles.
<style type="text/css">
body,td {
font-size: 10pt;
}
tr {
background-color: white;
margin: 1px;
}
table {
border: 1px #B4D0F3 solid;
border-collapse: collapse;
}
tr.striped {
background-color: #E5EFFE;
}
th {
padding: 10px 18px;
background-color: #B4D0F3;
text-align: left;
}
td {
padding: 10px 18px;
}
</style>
Run and see the out-put,
Out Put :
Up to this, we have not added any JQuery code.
3) Add JQuery, to get different color to all add odd rows of a table :
Add a JQuery code to import JQuery library.
Add function to change table odd rows color to
get zebra stripe effect in table rows.
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(odd)").addClass("striped");
});
</script>
Out Put :
We added single line of code in JQuery function,
$("table tr:nth-child(odd)").addClass("striped");
This is giving striping effect,
table tr:nth-child(odd) – This is finding the odd rows of a table.
once the odd is found, then applying the style to “striped” dynamically.
Here striped is a simple name, we can use any names instead of striped.
You can Download complete source code, Here
*** Venkat – Happy leaning ****