How to create a Zebra Stripes table effect using jQuery?

In the previous tutorial, we created a simple script which allows you to add/remove input fields dynamically with jQuery. In this post, we are going to create the zebra strips table effect using jQuery.

How to create a Zebra Stripes table effect using jQuery?

How to create a Zebra Stripes table effect using jQuery?

Click Here, to view the working demo.

HTML:

<div class="container">
	<table>
		<tr>
			<th>Country</th>
			<th>Capital</th>
		</tr>
		<tr>
			<td>India</td>
			<td>New Delhi</td>
		</tr>
		<tr>
			<td>New Zealand</td>
			<td>Wellington</td>
		</tr>
		<tr>
			<td>Germany</td>
			<td>Berlin</td>
		</tr>
		<tr>
			<td>Nepal</td>
			<td>Kathmandu</td>
		</tr>
		<tr>
			<td>Japan</td>
			<td>Tokyo</td>
		</tr>
		<tr>
			<td>Russia</td>
			<td>Moscow</td>
		</tr>
		<tr>
			<td>France</td>
			<td>Paris</td>
		</tr>
	</table>
</div>

CSS:

.container {
	width: 500px;
	margin: 0px auto;
}
table{
	width: 100%;
	border-collapse: collapse;
}
table tr td{
	width: 50%;
	border: 1px solid #e3e3e3;
	padding: 5px;
}
table tr th{
	border: 1px solid #e3e3e3;
	padding: 5px;
}
.zebra{
	background-color: #e3e3e3;
}

 jQuery:

$(document).ready(function(){
	$("tr:odd").addClass("zebra");
});

 

0 Comments

Leave a Comment.