AFter reading this tbrough I believe it is easier to code the alternate bar class as odd then use CSS to set the colors. When changing a table with DW I just use the table command to modify the colors. If I was using a database to populate the table then I would have to use a script (of some kind) but not being a java coder (I use VBscript and .asp pages) I find this a pain, as I don’t want to learn another language (having used BASIC and its variants for 40 years.) I use programming tools as adjuncts to teaching medicine.
Copy & paste the code below to embed this comment.
Anthony
the tables look cool but when you print them they look like crap. i have designed a solution where but its not well designed as what i do is insert a layer (that has an image that is a color and the size of the layer) underneath every other row or marked row to give it a background color. so when you print the zebra tables it looks as cool on the screen, but i am thinking there is got to be a more classful way to do what i’ve done. anyone interested in seeing this?
any suggestions?
function colorize(itemLoc){
var fullText = document.getElementById(itemLoc);
var allLists = fullText.getElementsByTagName(“ul”);
var allTables = fullText.getElementsByTagName(“table”);
for (i=0; i<allLists.length; i++){
if (allLists.className==“stripedList”){
var colorElements = allLists.getElementsByTagName(“li”);
for (var j=0; j<colorElements.length; j+=2){
colorElements[j].className += “ dark”;
}
}
}
for (k=0; k<allTables.length; k++){
if (allTables[k].className==“stripedTable”){
var colorElements = allTables[k].getElementsByTagName(“tr”);
for (var l=0; l<colorElements.length; l+=2){
colorElements[l].className += “ dark”;
}
}
else if (allTables[k].className==“checkeredTable”){
var colorElements = allTables[k].getElementsByTagName(“td”);
for (var m=0; m<colorElements.length; m+=2){
colorElements[m].className += ” dark”;
m += 3;
if (m < colorElements.length){
colorElements[m].className += ” dark”;
}
m -= 1;
}
}
}
}
‘content’ is the id of the element (in most cases, probably a div) inside of which you want to look for items to be zebra-striped. So, for example, on the site I used this for, div#content contains various lists with the class of “stripeList,” various tables with the class of “stripeTable,” and other tables with the class of “checkeredTable” (the last of which is a table with two columns, many rows, to which a style is applied (going left-to-right, row by row) to its first cell, then it’s fourth cell and fifth cell, then its eighth and nineth, and so on and so forth).
This is evil:
<body >
Because it does not seperate behaviour and structure. Instead in the JS file put
window.onload = function;
Seperating Behaviour and Strucure is very important.
Copy & paste the code below to embed this comment.
Ryan Nichols
Hey Tim,
I disagree. I went back and reviewed your lists as tables. The examples you show aren’t semantically correct, and don’t have the correct relationships that a table would.
First look at it with style sheets turned off. The first ‘list item’ are the column headers. Then the subsequent list items are rows of ‘items’ and thier data, yet thier shown hiearchically the same as the headers. The first ‘list item’ of headers is a completely different type of data than the remaining ‘list items’ and this is reflected nowhere in the code.
Only a table can show the correct relationship by designating header data in a THEAD, and the body data in a TBODY. Tables also have the capability of linking individual cells with thier appropriate header, something the list example cannot do. The columns can be given a ‘title’ attirbute to add further information about the column, and because of the relationships, that title data is linked to each cell underneath it further describing the content.
Third and final point is cells don’t always have only one header. Cells can often have larger parent headers spanning two columns, and subheads spanning one column each underneath that.
View this link on the WC3 for an example. It’s a paragraph or two down the page.
97 Reader Comments
Back to the ArticleChristopher Buttery
AFter reading this tbrough I believe it is easier to code the alternate bar class as odd then use CSS to set the colors. When changing a table with DW I just use the table command to modify the colors. If I was using a database to populate the table then I would have to use a script (of some kind) but not being a java coder (I use VBscript and .asp pages) I find this a pain, as I don’t want to learn another language (having used BASIC and its variants for 40 years.) I use programming tools as adjuncts to teaching medicine.
Anthony
the tables look cool but when you print them they look like crap. i have designed a solution where but its not well designed as what i do is insert a layer (that has an image that is a color and the size of the layer) underneath every other row or marked row to give it a background color. so when you print the zebra tables it looks as cool on the screen, but i am thinking there is got to be a more classful way to do what i’ve done. anyone interested in seeing this?
any suggestions?
Marc Palau
Hi.
I see the itunes screenshot that u put here and i can’t remedy my dhtml obsession of clone all i see :P…
here u have a adaptation of u’r idea to just do that itunes do (i don’t know if the mouseover that i put exists on itunes but it’s there).
http://www.palaueb.com/javascript/dhtml/itunes.htm
ah! u only need to write the name of song and the artist, the script itself do the count and attach the checkbox.
Blair Miller
Here’s what I came up with:
// apply alternating classes to lists or tables
function colorize(itemLoc){
var fullText = document.getElementById(itemLoc);
var allLists = fullText.getElementsByTagName(“ul”);
var allTables = fullText.getElementsByTagName(“table”);
for (i=0; i<allLists.length; i++){
if (allLists.className==“stripedList”){
var colorElements = allLists.getElementsByTagName(“li”);
for (var j=0; j<colorElements.length; j+=2){
colorElements[j].className += “ dark”;
}
}
}
for (k=0; k<allTables.length; k++){
if (allTables[k].className==“stripedTable”){
var colorElements = allTables[k].getElementsByTagName(“tr”);
for (var l=0; l<colorElements.length; l+=2){
colorElements[l].className += “ dark”;
}
}
else if (allTables[k].className==“checkeredTable”){
var colorElements = allTables[k].getElementsByTagName(“td”);
for (var m=0; m<colorElements.length; m+=2){
colorElements[m].className += ” dark”;
m += 3;
if (m < colorElements.length){
colorElements[m].className += ” dark”;
}
m -= 1;
}
}
}
}
Call it from the body tag using:
<body >Blair Miller
‘content’ is the id of the element (in most cases, probably a div) inside of which you want to look for items to be zebra-striped. So, for example, on the site I used this for, div#content contains various lists with the class of “stripeList,” various tables with the class of “stripeTable,” and other tables with the class of “checkeredTable” (the last of which is a table with two columns, many rows, to which a style is applied (going left-to-right, row by row) to its first cell, then it’s fourth cell and fifth cell, then its eighth and nineth, and so on and so forth).
Dante
This is evil:
<body >
Because it does not seperate behaviour and structure. Instead in the JS file put
window.onload = function;
Seperating Behaviour and Strucure is very important.
Ryan Nichols
Hey Tim,
I disagree. I went back and reviewed your lists as tables. The examples you show aren’t semantically correct, and don’t have the correct relationships that a table would.
First look at it with style sheets turned off. The first ‘list item’ are the column headers. Then the subsequent list items are rows of ‘items’ and thier data, yet thier shown hiearchically the same as the headers. The first ‘list item’ of headers is a completely different type of data than the remaining ‘list items’ and this is reflected nowhere in the code.
Only a table can show the correct relationship by designating header data in a THEAD, and the body data in a TBODY. Tables also have the capability of linking individual cells with thier appropriate header, something the list example cannot do. The columns can be given a ‘title’ attirbute to add further information about the column, and because of the relationships, that title data is linked to each cell underneath it further describing the content.
Third and final point is cells don’t always have only one header. Cells can often have larger parent headers spanning two columns, and subheads spanning one column each underneath that.
View this link on the WC3 for an example. It’s a paragraph or two down the page.
http://www.w3.org/TR/html401/struct/tables.html#adef-headers