Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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:

  1. 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).

  1. 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.
  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.

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:

  1. 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.
  2. In the altrow.css file, note that rule sets have been added for classes named alt_header, alt_odd, and alt_even.
  3. 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.image text in transcribed

Please help me on 4, 5 ,6 this is what i got so far for 1, 2, 3

INDEX.HTML

Alternating Row Plugin

Important People in Computer Science

First NameLast NameDate of BirthAccomplishment
CharlesBabbage12/26/1791 Originated the concept of a programmable computer, invented the first mechanical computer.
AdaLovelace12/10/1815 First computer programmer. Wrote an algorithm for Babbage's mechanical computer.
AlanTuring6/23/1912 Invented the Turing Machine, a hypothetical device that's a model of a general purpose computer.
GraceHopper12/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 glitches

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Data Management Databases And Organizations

Authors: Richard T. Watson

2nd Edition

0471180742, 978-0471180746

More Books

Students also viewed these Databases questions

Question

5. If yes, then why?

Answered: 1 week ago

Question

6. How would you design your ideal position?

Answered: 1 week ago