Please HELP with JQUERY and JavaScript 1.In the jquery.altrow.js file, code a pl
ID: 3803344 • Letter: P
Question
Please HELP with JQUERY and JavaScript
1.In the jquery.altrow.js file, code a plugin that uses the getElementsByTagName method to get all of an element’s “tr” child elements. Then, it should apply a class named “header” to the header row, and classes named “even” and “odd” on an alternating basis to the rest of the rows. Note: you can check whether a row contains “th” elements to see if it’s a header row.
2. In the altrow.js file, add code to the onload event that calls the plugin for the table element. Run the application and see that the row styles are applied to the table.
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alternating Row Plugin</title>
<link rel="stylesheet" href="altrow.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.altrow.js"></script>
<script src="altrow.js"></script>
</head>
<body>
<main>
<h1>Important People in Computer Science</h1>
<table id="important">
<tr>
<th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Accomplishment</th>
</tr>
<tr>
<td>Charles</td><td>Babbage</td><td>12/26/1791</td>
<td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
</tr>
<tr>
<td>Ada</td><td>Lovelace</td><td>12/10/1815</td>
<td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
</tr>
<tr>
<td>Alan</td><td>Turing</td><td>6/23/1912</td>
<td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
</tr>
<tr>
<td>Grace</td><td>Hopper</td><td>12/9/1906</td>
<td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
</tr>
</table>
</main>
</body>
</html>
query.altrow.js file:
"use strict";
(function ($) {
$.fn.pluginName = function(){
return this.each(function() {
//the code for the plugin
});
};
}) (jQuery);
altrow.js file
"use strict";
window.onload = function() {
};
Explanation / Answer
Code inline
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alternating Row Plugin</title>
<link rel="stylesheet" href="altrow.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.altrow.js"></script>
<script src="altrow.js"></script>
</head>
<body>
<main>
<h1>Important People in Computer Science</h1>
<table id="important">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Accomplishment</th>
</tr>
<tr>
<td>Charles</td>
<td>Babbage</td>
<td>12/26/1791</td>
<td>Originated the concept of a programmable computer, invented the first mechanical computer.</td>
</tr>
<tr>
<td>Ada</td>
<td>Lovelace</td>
<td>12/10/1815</td>
<td>First computer programmer. Wrote an algorithm for Babbage's mechanical computer.</td>
</tr>
<tr>
<td>Alan</td>
<td>Turing</td>
<td>6/23/1912</td>
<td>Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.</td>
</tr>
<tr>
<td>Grace</td>
<td>Hopper</td>
<td>12/9/1906</td>
<td>Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches.</td>
</tr>
</table>
</main>
</body>
</html>
query.altrow.js file:
"use strict";
(function ($) {
$.fn.pluginName = function(){
});
};
}) (jQuery);
altrow.js file
"use strict";
window.onload = function() {
$("#important > tr > th").addClass("header");
$("#important > tr:odd").addClass("odd");
$("#important > tr:not(.odd)").addClass("even");
};