There is a jQuery plugin that needs to be developed, providing table styles. The
ID: 3816978 • Letter: T
Question
There is a jQuery plugin that needs to be developed, providing table styles. The only thing that I'm just having trouble with is figuring out how to add the getElementsByTagName method. The code below works and table styles are displaying perfectly, but I'm just stuck on how to add the getElementsByTagName method in the jquery.altrow.js file.
Here are the directions below:
1. In the HTML file, note the script tags for the jQuery library and the plugin file (jquery.altrow.js).
2. 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.
3. In the altrow.js file, add code to the onload event that calls the plugin for the table element. Run the app.
INDEX.HTML
<!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>
ALTROW.CSS
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 650px;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
color: blue;
}
label {
float: left;
width: 11em;
text-align: right;
padding-bottom: .5em;
}
input {
margin-left: 1em;
margin-bottom: .5em;
}
/* table-specific css */
table {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
margin-bottom: 1em;
}
th {
padding: 0.5em;
text-align: left;
vertical-align: top;
}
td {
padding: 0.5em;
max-width: 28em;
border-top: 1px solid black;
border-right: 1px solid black;
vertical-align: top;
}
.header {
background-color: lightblue;
}
.odd {
background-color: white;
}
.even {
background-color: lightgray;
}
ALTROW.JS
"use strict";
window.onload = function() {
$(document).ready(function () {
$('#important').decorateTable();
});
};
JQUERY.ALTROW.JS
"use strict";
(function ($) {
$.fn.decorateTable = function (options) {
// default
var settings = $.extend({
oddRow: 'odd',
evenRow: 'even',
headerRow: 'header'
}, options);
// odd rows that don't have the th element
$('tr:not(":has(th)"):odd', this).addClass(settings.evenRow);
// even rows that don't have the th element
$('tr:not(":has(th)"):even', this).addClass(settings.oddRow);
//row that has the th element (on which this plugin is applied)
$('tr:has(th)', this).addClass(settings.headerRow);
}
}(jQuery));
Explanation / Answer
jquery.altrow.js:
"use strict";
(function ($) {
$.fn.decorateTable = function (options) {
// default
var settings = $.extend({
oddRow: 'odd',
evenRow: 'even',
headerRow: 'header'
}, options);
// odd rows that don't have the th element
//$('tr:not(":has(th)"):odd', this).addClass(settings.evenRow);
// even rows that don't have the th element
//$('tr:not(":has(th)"):even', this).addClass(settings.oddRow);
//row that has the th element (on which this plugin is applied)
//$('tr:has(th)', this).addClass(settings.headerRow);
}
$.fn.getChildElements = function(){
var childrenEleArrayRows = document.getElementById(this[0].id).children[0].getElementsByTagName('TR');
for (var head=0; head < childrenEleArrayRows.length; head++){
console.log(childrenEleArrayRows[head].firstElementChild.nodeName.toLowerCase());
if(childrenEleArrayRows[head].firstElementChild.nodeName.toLowerCase() === "th"){
$(childrenEleArrayRows[head], this).addClass('header');
}
else if(head === 1){
$(childrenEleArrayRows[head], this).addClass('even');
}
else if( head %2 ===0 ){ //check for even or odd rows
$(childrenEleArrayRows[head], this).addClass('odd');
}
else {
$(childrenEleArrayRows[head], this).addClass('even');
}
}
console.log(childrenEleArrayRows, "childrenArray");
}
}(jQuery));
altrow.js:
"use strict";
window.onload = function() {
$(document).ready(function () {
$('#important').decorateTable();
$('#important').getChildElements();
});
};
NOte: There are no changes to be done in html and css files
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.