Lesson 2: Working with tables CHAPTER 5 237
}tfoot th {
background-color: #C2FE9A;
}tfoot th:last-of-type {
text-align: right;
}td {
text-align: center;
}td:last-of-type {
text-align: right;
}.hidden {
display: none;
}.visible {
display: normal;
}
The CSS file now has the .hidden and .visible selectors. These are used to show or hide the
<tbody> elements, including their contents. The JavaScript file contains the following code.
function init() {
document.getElementById('showAntique').addEventListener('click', showAntiqueCars);
document.getElementById('showNonAntique').addEventListener('click',
showNonAntiqueCars);
}function showAntiqueCars() {
document.getElementById('antiqueCars').className = "visible";
document.getElementById('nonAntiqueCars').className = "hidden";
}function showNonAntiqueCars() {
document.getElementById('antiqueCars').className = "hidden";
document.getElementById('nonAntiqueCars').className = "visible";
}
The JavaScript code contains an init function that is called when the HTML document is
loaded. The init function attaches event handlers to the click event of the two buttons. The
additional functions set the CSS class to display or hide the <tbody> elements.
When the webpage is displayed, all vehicles are displayed. Clicking the Antique Cars but-
ton displays the antique cars and hides the non-antique cars. Clicking the Non-Antique Cars
button displays the non-antique cars and hides the antique cars.