|
When we want to display large chunks of data in a single page then we can use
JQuery odd Selector. For example when we want to see data in readable format,
then we can apply css on table to show data where table row index is (odd)1, 3, and
5… In this article I am trying to show you, how we can use odd selector.
Syntax:
(“tr: odd”) .css();
Code:
<title>JQuery odd selector</title>
<script
type="text/javascript"
src="jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function {
$("tr:odd").css("color", "blue");//css will apply on table where row index is odd
$("tr:odd").css("font-size", "20");
});
</script>
</head>
<body>
<h2>
JQuery odd and even method</h2>
<table
width="300">
<tr>
<th>
Id
</th>
<th>
Name
</th>
<th>
City
</th>
<th>
Age
</th>
</tr>
<tr>
<td
align="center">
S001
</td>
<td
align="center">
Sachin
</td>
<td
align="center">
Allahabad
</td>
<td
align="center">
23
</td>
</tr>
<tr>
<td
align="center">
S002
</td>
<td
align="center">
Raj
</td>
<td
align="center">
Varanasi
</td>
<td
align="center">
21
</td>
</tr>
<tr>
<td
align="center">
S003
</td>
<td
align="center">
Sameer
</td>
<td
align="center">
Lucknow
</td>
<td
align="center">
25
</td>
</tr>
<tr>
<td
align="center">
S004
</td>
<td
align="center">
Manish
</td>
<td
align="center">
Delhi
</td>
<td
align="center">
24
</td>
</tr>
<tr>
<td
align="center">
S005
</td>
<td
align="center">
Kajal
</td>
<td
align="center">
Kanpur
</td>
<td
align="center">
26
</td>
</tr>
</table>
</body>
When page will be run all odd indexes record font
color will blue and size also cahnge as shown below:
|