Alternate Rows - Selectors
Design a webpage that displays a customer information table. The alternate rows of the table need to be colored using jQuery as depicted in the web page image given below. Refer to the notes for more clarifications.
Concepts Coverage:- jQuery Selectors [Table element selectors]
Web page snapshot:
Note:
1. The HTML part of the program is given as a template. You have to write the jQuery script only in the 'script.js' file.
2. The background color of the table caption and odd rows of the table should be 'light blue' and even rows of the table should be 'light pink'. Observe the above table image for more details.
3. Avoid writing the jQuery 'document ready' method for the proper web page visibility.
4. Do not use 'ES6' features.
Solution:
Alternate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Custom Selector</title>
<style>
/* Some custom style */
*{
padding: 5px;
}
</style>
</head>
<body>
<table border="1">
<caption><strong>Customer Information</strong></caption>
<thead>
<tr>
<th>Customer No.</th>
<th>Custome Name</th>
<th>Contact No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Z1021</td>
<td>Kim Walker</td>
<td>9996648390</td>
</tr>
<tr>
<td>Z3985</td>
<td>Jack Welington</td>
<td>8993648391</td>
</tr>
<tr>
<td>Z6849</td>
<td>John Rambo</td>
<td>7809368394</td>
</tr>
<tr>
<td>Z6850</td>
<td>Mary Carter</td>
<td>8809364594</td>
</tr>
<tr>
<td>Z6830</td>
<td>John Rambo</td>
<td>7809368394</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"> </script>
</body>
</html>
script.js
$("tr:even").css("background-color", "#FFB6C1");
$("tr:odd,caption").css("background-color","#ADD8E6")
