Easy Table Reading in JavaScript, Page 1
|
|
|
| 1.8/5.0 (5 votes total) |
|
|
|
|
Jonathan Fenocchi
February 17, 2006
|
| Jonathan Fenocchi |
Jonathan Fenocchi is a talented young developer coming at you from southern TX, USA. Accessibility advocate, proficient programmer, and determined designer, Jonathan spends his free time researching new technologies, developing new ideas, playing video games and listening to rock music. Jonathan runs a Slightly Remarkable blog where he focuses on web-related content, and continues to pursue his goals as an aspiring web developer."
|
| Jonathan Fenocchi
has written 20 tutorials for JavaScriptSearch. |
| View all tutorials by Jonathan Fenocchi... |
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"
"http://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 page-- |
FEEDBACK
COMMENTS
PRINT
SUBMIT TUTORIAL
RSS
Add comment
(Comments: 0)
