Question: Extra 17-1 Develop a jQuery plugin that provides table styles In this exercise, youll create a jQuery plugin that provides styling for the header row

Extra 17-1 Develop a jQuery plugin that provides table styles

In this exercise, 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

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

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

---------------------------------

Files:

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() {

};

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.

jquery.altrow.js

"use strict";

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!