Easy Table Reading in JavaScript
  [next] |
Easy Table Reading in JavaScript
Readability is a key factor on any web site as it enhances the user experience. If a user suffers from a partial visual impairment it can help them pinpoint information with greater ease. This article focuses on taking advantage of JavaScript's style-alternating capabilities and event-handlers to make any dynamic web page easier to read in a few seconds.
Let's begin with a sample page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"https://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Example</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="content-script-type"
content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css"><!--
.tbl {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
font-family: arial, sans-serif;
font-size: small;
}
.tbl td, .tbl th {
text-align: center;
border: 1px solid #000;
}
.tbl th {
background-color: #aaf;
}
.tbl .on {
background-color: #ddd;
}
.tbl .off {
background-color: #fff;
}
.tbl .hover {
background-color: #99f;
}
.tbl .click {
background-color: #66f;
font-weight: bold;
}
--></style>
</head>
<body>
<table class="tbl">
<tr><th>Word Word</th><th>Word
Word</th><th>Word Word</th></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
<tr><td>word word</td><td>word
word</td><td>word word</td></tr>
</table>
</body>
</html>
In the code above we have a simple HTML document with twenty rows and three columns. We have applied Cascading Stylesheets (CSS) to the table to format it. Notice the class="tbl" part of the code - this is the class to format the table. By setting a class on specific tables, we can tell JavaScript only to target specific tables. This way, if you don't want a table to be automatically formatted for any particular reason, you can avoid it by simply not adding the class="tbl" to the table tag. You'll notice other assorted CSS tags in the document as well, these are sub-classes that we will use in our JavaScript to change the background colors and other styling information - at will.
Let's move on to the first part of our script - alternating colors. We want to take one row, color its background one color (using the "on" class), take the next row, and color its background another color (using the "off" class). Adding the following script inside the HEAD tags will do just that:
<script type="text/javascript"><!--
var elem = "TR";
window.onload = function(){
if(document.getElementsByTagName){
var el = document.getElementsByTagName(elem);
for(var i=0; i<el.length; i++){
if(el[i].childNodes[0].tagName
!= "TH"
&& el[i].parentNode.parentNode.className.indexOf("tbl")
!= -1){
if(i%2 == 1){
el[i].className
= "on";
} else {
el[i].className = "off";
}
}
}
}
//--></script>
[next] |
Created:
March 27, 2003
Revised: December 09, 2004
URL: https://webreference.com/programming/javascript/Jf/column71
Find a programming school near you