Question
Develop a jQuery plugin that provides table styles In this assignment, youll create a jQuery plugin that provides styling for the header row and alternating
Develop a jQuery plugin that provides table styles
In this assignment, youll create a jQuery plugin that provides styling for the header row and alternating rows of an HTML table using CSS classes. An HTML table with the CSS classes of the plugin applied to it looks like this:
- Open the HTML and JavaScript files in this folder:
In the HTML file, note the script tags for the jQuery library and the plugin file (jquery.altrow.js).
- In the jquery.altrow.js file, code a plugin that uses the getElementsByTagName method to get all of an elements 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 its a header row.
- 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.
Now lets enhance your jQuery plugin to allow customized options. Specifically, youll allow a user to specify the name of the CSS class to use for the header row, the even rows, and the odd rows. An HTML table with an alternate header CSS class applied to it looks like this:
- In the jquery.altrow.js file, enhance the plugin so the user can specify the names of the CSS classes to be used for the header row and for the odd and even rows.
- In the altrow.css file, note that rule sets have been added for classes named alt_header, alt_odd, and alt_even.
- In the altrow.js file, code the call to the jQuery plugin so it uses just one of the new CSS classes to modify the formatting of the table. The other rows should still use the default formatting. Then, test to make sure that all three options work.
Please help me on 4, 5 ,6 this is what i got so far for 1, 2, 3
INDEX.HTML
Important People in Computer Science
First Name | Last Name | Date of Birth | Accomplishment |
---|---|---|---|
Charles | Babbage | 12/26/1791 | Originated the concept of a programmable computer, invented the first mechanical computer. |
Ada | Lovelace | 12/10/1815 | First computer programmer. Wrote an algorithm for Babbage's mechanical computer. |
Alan | Turing | 6/23/1912 | Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer. |
Grace | Hopper | 12/9/1906 | Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches. |
ALTROW.JS
"use strict";
window.onload = function() { $('#important').tableColour(); };
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; }
jquery.altrow.js
"use strict"; function hasClass(obj) { var result = false; if (obj.getAttributeNode("class") != null) { result = obj.getAttributeNode("class").value; } return result; }
(function ($) {
$.fn.tableColour = function () { var even = false; //alert("hi"); var table = document.getElementById("important"); var tag = document.getElementsByTagName("table"); //we will for (var j = 0; j
var ths = trs[i].getElementsByTagName("th"); //the below code is to append class for th for (var j = 0; j
}
}(jQuery));
Important People in Computer Science First Name Last Name Date of Birth Accomplishment Charles Babbage 12/26/1791 Originated the concept of a programmable computer, invented the first mechanical computer. Ada Lovelace 12/10/1815 First computer programmer. Wrote an algorithm for Babbage's mechanical computer. Alan Turing 6/23/1912 Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer. Grace Hopper 12/9/1906 Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitches. Important People in Computer Science First Name Last Name Date of Birth Accomplishment Charles Babbage 12/26/1791 Originated the concept of a programmable computer, invented the first mechanical computer. Ada Lovelace 12/10/1815 First computer programmer. Wrote an algorithm for Babbage's mechanical computer. Alan Turing 6/23/1912 Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer. Grace Hopper 12/9/1906 Invented the first compiler for a computer programming language, popularized the term "debugging" for fixing computer glitchesStep by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started