jQuery Zebra Stripe a Table,
Create a Zebra Stripes table effect with Jquery,
Table row and col highlight with zebra striping,
How To Create A Zebra Striped Table,
How to add zebra striping and highlighting to table rows with jQuery
Hi friends, today I will tell you through this tutorial how we create zebra stripes table jquery and css.
First, we will create a table through html. Before creating a table in html, we have to create an html file. In the html, code will be created in the table, something like this will be written.
zebra-Stripes-table-create-using-jquery.html
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Zebra Stripes table create using jquery</title> </head> <body> <div class="table_style"> <table> <tr> <th>Student Name</th> <th>Collge Name</th> </tr> <tr> <td>Jack</td> <td>S.S. Inter College</td> </tr> <tr> <td>David</td> <td>P.T. Agra College</td> </tr> <tr> <td>Arthur</td> <td>P.K. College</td> </tr> <tr> <td>Bill</td> <td>u.s. Inter</td> </tr> </table> </div> </body> </html>
Then after that we will write its css something like this.
<style>
.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 1px solid #ff751a;
padding: 5px;
}
table tr th{
border: 1px solid #79ff4d;
padding: 5px;
}
.zebra{
background-color: #ff0066;
}
</style>
And add this code written in js file below.
<script>
$(document).ready(function(){
$("tr:odd").addClass("zebra");
});
</script>
If you want, you can also merge this entire code by typing it into an identical file as you can see below.
zebra-Stripes-table-create-using-jquery.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Zebra Stripes table create using jquery</title>
</head>
<body>
<div class="table_style">
<table>
<tr>
<th>Student Name</th>
<th>Collge Name</th>
</tr>
<tr>
<td>Jack</td>
<td>S.S. Inter College</td>
</tr>
<tr>
<td>David</td>
<td>P.T. Agra College</td>
</tr>
<tr>
<td>Arthur</td>
<td>P.K. College</td>
</tr>
<tr>
<td>Bill</td>
<td>u.s. Inter</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function(){
$("tr:odd").addClass("zebra");
});
</script>
</html>
<style>
.table_style {
width: 500px;
margin: 0px auto;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr td{
width: 50%;
border: 1px solid #ff751a;
padding: 5px;
}
table tr th{
border: 1px solid #79ff4d;
padding: 5px;
}
.zebra{
background-color: #ff0066;
}
</style>