Implementing Zebra Striping in HTML Tables with jQuery and Vanilla JavaScript
How to Include jQuery?
To demonstrate the convenience of jQuery, we'll implement a zebra striping effect on an HTML table using three different approaches: static CSS classes, vanilla JavaScript, and jQuery. This comparison highlights jQuery's simplicity and efficiency.
Static CSS Class Implementation
First, we can achieve zebra striping by directly applying CSS classes to table rows in the HTML. This method is straightforward but lacks dynamic flexibility.
Vanilla JavaScript Implementation
Next, we use vanilla JavaScript to dynamically apply zebra striping. This approach involves more code but allows for runtime modifications.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zebra Striping with Vanilla JavaScript</title>
<style type="text/css">
.header-row {
background-color: greenyellow;
}
.odd-row {
background-color: yellowgreen;
}
.even-row {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
const tableRows = document.getElementsByTagName("tr");
for (let i = 0; i < tableRows.length; i++) {
if (i === 0) {
tableRows[i].className = "header-row";
} else if (i % 2 === 1) {
tableRows[i].className = "odd-row";
} else {
tableRows[i].className = "even-row";
}
}
}
</script>
</head>
<body>
<table class="datalist">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>
jQuery Implementation
Now, we implement the same effect using jQuery, which significantly reduces the code complexity.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zebra Striping with jQuery</title>
<!-- Include jQuery library -->
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$("tr:odd").css("backgroundColor", "yellowgreen");
$("tr:even").css("backgroundColor", "lightyellow");
$("tr:first").css("backgroundColor", "greenyellow");
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Study" id="dataTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>
This example demonstrates that jQuery simplifies JavaScript code, aligning with its "write less, do more" philosophy.
jQuery Page Load Function
The page load function in jQuery is crucial for binding events after the document is ready. Its widely used in various applications.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Page Load Function</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
// Long form: jQuery(document).ready(function() { ... });
// Short form: $(document).ready(function() { ... });
// Common shorthand: $(function() { ... });
$(function() {
const spanElement = document.getElementById("textSpan");
console.log(spanElement.innerText);
});
$(function() {
console.log("Second page load function");
});
$(function() {
console.log("Third page load function");
});
</script>
</head>
<body>
<span id="textSpan">Sample text</span>
</body>
</html>
Summary
To use jQuery, first include the jQuery JavaScript file. jQuery itself is a JS library, with jquery.min.js being the minified version recommended for production. The $ symbol is central to jQuery and serves two primary purposes in this context:
-
Page Load Function:
jQuery(document).ready(function() {});can be shortened to$(document).ready(function() {});or further to$(function() {});. This is similar towindow.onload = function() {}but more powerful. Unlikewindow.onload, which can only be defined once per page and waits for all resources (images, links, media) to load,$()allows multiple non-conflicting definitions and executes earlier. -
Selector Indicator:
$(selector)is used for element selection. jQuery offers robust selector capabilities, which will be covered in detail in subseuqent sections.
