:nth-child()
selectorYou can use the jQuery :nth-child()
selector to create the zebra striped table by highlighting its alternate rows. The :nth-child(N)
selector accepts these arguments — the index of each child to match (starting with 1
), the string even or odd, or an expression (e.g. :nth-child(2)
, :nth-child(even)
, :nth-child(2n)
. Let's take a look at an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zebra Striped Table with jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
// Apply alt class on alternate table row
$("table tbody tr:nth-child(2n)").addClass("alt");
});
</script>
<style>
table{
margin: 30px;
border-collapse: collapse;
}
table tr{
border-bottom: 1px solid #666;
}
table th, table td{
padding: 10px;
}
/* Highlighter class */
.alt{
background: #cdcdcd;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
<tr>
<td>4</td>
<td>Harry</td>
<td>Potter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>5</td>
<td>Percy</td>
<td>Jackson</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to Send POST Request Without Waiting for Response?
In this article, I will share with you h...Restful API In Laravel 5.5 Using jwt Authentication
Today, we are share with you how to buil...Some errors have been detected on the server, please look at the bottom of this window.
You might have already worked in phpMyAd...PayPal Payment Gateway API integration in Laravel
Today, in this article i will share with...How to Change Column Name and Type in Laravel Migration
In the working with MySQL database, some...