PDA

View Full Version : Adaption of Zebra Tables

shlagish
03-11-2005, 06:48 AM
After reading this article: http://www.alistapart.com/articles/zebratables/
I decided that I might want more than one of those tables in the same document, so I decided I should adapt the script to make it operate from class instead of id.

What this script does:
Makes the odd rows of a table have a different style than the even rows.
Doesn't override any class declaration put on the table, any tr or any td.
Requires only a class declaration on the table. If you want another class at the same time, do it: <table class='zebra bordered'>
Allows more than one table like this to be in the same document.

Anyways, here is my script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Zebra Tables</title>
<style type="text/css">
<!--

.zebra { margin: 1em; }
.zebra tr td { font-family: verdana, sans-serif;
padding: 3px 8px;
border-left: 1px solid #d9d9d9;
}
.zebra tr.highlighted td { background: #3d80df;
color: #fff;
font-weight: bold;
}
.zebra tr td.unavailable { color: #f00;
text-decoration: line-through;
background: #eee;
}

.zebra tr td.odd { background: #edf3fe; }
.zebra tr td.even { background: #fff; }

.bordered { border: 5px solid #d9d9d9; }

/#For browser that support CSS3#/
.zebra tr:nth-child(odd) td { background: #edf3fe; }
.zebra tr:nth-child(even) td {background: #fff; }
/#End of browser-specific code#/

//-->
</style>

<script type="text/javascript">
<!--

/#This script is originally made by David F. Miller#/
/#I just brought a couple modifications#/
/#See the original script: http://www.alistapart.com/articles/zebratables/ #/

/# This function is needed to work around a bug in IE related to element attributes #/
function hasClass(obj) {

var result=false;
if(obj.getAttributeNode("class")!=null){
result=obj.getAttributeNode("class").value;
}
return result;
}

function zebra() {

var tables=document.getElementsByTagName('table'),
i;
for(i=0;i<tables.length;i++){
if(hasClass(tables[i]).match('zebra')){
var trs=tables[i].getElementsByTagName('tr'),
j,
even=0;
for(j=0;j<trs.length;j++){
if(!hasClass(trs[j])){
var tds=trs[j].getElementsByTagName('td'),
k;
for(k=0;k<tds.length;k++){
if(!hasClass(tds[k])){
tds[k].setAttribute('class',(even)?'even':'odd');
}
}
}
even=!even;
}
}
}
}

window.onload=zebra;

// -->
</script>
</head>
<body>

<h1>Zebra Tables</h1>

<table class="zebra" cellspacing="0">
<tr>
<td>1</td>
<td>Lost In The Plot</td>
<td>The Dears</td>
</tr>
<tr>
<td>2</td>
<td>Poison</td>
<td>The Constantines</td>
</tr>
<tr class="highlighted">
<td>3</td>
<td>Plea From A Cat Named Virtute</td>
<td>The Weakerthans</td>
</tr>
<tr>
<td>4</td>
<td>Melissa Louise</td>
<td>Chixdiggit!</td>
</tr>
<tr>
<td>5</td>
<td>Living Room</td>
<td>Tegan And Sara</td>
</tr>
<tr>
<td>6</td>
<td>Speed</td>
<td>Bran Van 3000</td>
</tr>
<tr>
<td>7</td>
<td>Fast Money Blessing</td>
<td>King Cobb Steelie</td>
</tr>
<tr>
<td>8</td>
<td class="unavailable">Sore</td>
<td>Buck 65</td>
</tr>
<tr>
<td>9</td>
<td>Love Travel</td>
<td>Danko Jones</td>
</tr>
<tr>
<td>10</td>
<td>You Never Let Me Down</td>
<td>Furnaceface</td>
</tr>
</table>
<table class="zebra bordered" cellspacing="0">
<tr>
<td>1</td>
<td>Lost In The Plot</td>
<td>The Dears</td>
</tr>
<tr>
<td>2</td>
<td>Poison</td>
<td>The Constantines</td>
</tr>
<tr>
<td>3</td>
<td>Plea From A Cat Named Virtute</td>
<td>The Weakerthans</td>
</tr>
<tr class="highlighted">
<td>4</td>
<td>Melissa Louise</td>
<td>Chixdiggit!</td>
</tr>
<tr>
<td>5</td>
<td>Living Room</td>
<td>Tegan And Sara</td>
</tr>
<tr>
<td>6</td>
<td>Speed</td>
<td>Bran Van 3000</td>
</tr>
<tr>
<td>7</td>
<td>Fast Money Blessing</td>
<td>King Cobb Steelie</td>
</tr>
<tr>
<td>8</td>
<td>Sore</td>
<td>Buck 65</td>
</tr>
<tr>
<td>9</td>
<td class="unavailable">Love Travel</td>
<td>Danko Jones</td>
</tr>
<tr>
<td>10</td>
<td>You Never Let Me Down</td>
<td>Furnaceface</td>
</tr>
</table>

</body>
</html>

What do you think?

p.s the content of the tables, the colours and the hasClass() function are not my creation, remember, it's just an adaption to an existing script.
Alex Vincent
03-13-2005, 08:45 PM
At the very least, you should credit the original author's contributions to this script as a comment. :) Perhaps ask permission to reuse?
shlagish
03-14-2005, 12:11 AM
Hmm, I thought mentionning him and linking would suffice, but your right: I should also name him: David F. Miller.
I'll add that as a comment in the script in a few moments.

Apart from that, what do you think of my modification?
Single Paradox
01-21-2006, 09:47 PM
bringing back an old post, but I have a zebra script as well, check it out here:

http://singleparadox.com/codes/testZebra.htm


(The drench fat is just a place holder, I was very bored :rolleyes: )
canadianjameson
01-21-2006, 10:56 PM
I like the approach Shlag. looks nice and works well.

I may use this approach to dynamically set a border: black 1px solid; on a table and not get that annoying double border issue.

i assume this script can be jiggled to do so, right? :D
shlagish
01-23-2006, 01:46 AM
course, that's what codingforums is all about.
canadianjameson
01-23-2006, 05:07 AM
AHAHA, exactly.

what would the code be?

i ask only because if you can develop a stand-alone code i will save it and use it forevermore
Single Paradox
01-23-2006, 08:49 AM
<script>

// Even
var sp_evenbgcolor="#0a0a43";
var sp_evenfontcolor="#FFFFFF";
// Odd
var sp_oddbgcolor="#EEEEEE";
var sp_oddfontcolor="#000000";



// No need to edit beyond here



function sp_setZebras(){
for(var i=0;i<document.getElementsByTagName('tr').length;i++){
document.getElementsByTagName('tr')[i].id=i;
if(document.getElementsByTagName('tr')[i].id%2==1){
document.getElementsByTagName('tr')[i].style.backgroundColor=sp_evenbgcolor;
document.getElementsByTagName('tr')[i].style.color=sp_evenfontcolor;
}else{
document.getElementsByTagName('tr')[i].style.backgroundColor=sp_oddbgcolor;
document.getElementsByTagName('tr')[i].style.color=sp_oddfontcolor;
}
}
}

</script>
<style>
td{border:1px solid black;height:25px;padding-left:20px;width:100px;font-weight:bold;}
</style>
</head>
<body onload="sp_setZebras();">
canadianjameson
01-23-2006, 03:45 PM
thx single, however I what I wanted was a script, or adaptation of your script, to avoid this:
www.enviromark.ca/fvjones/doublborder.htm

as you can see, the inner borders are doubled because both sides (left & right) of adjacent cells are set to border: 1px solid black

what i'm trying to do is use the following four css-properties in conjunction with javascript to avoid that:
border-right: 1px solid black
border-left: 1px solid black
border-top: 1px solid black
border-bottom: 1px solid black


this is the code from the link above (not that you need it, but whatever, lol)

<script>

// Even
var sp_evenbgcolor="#FFFFFF";
var sp_evenfontcolor="#FFFFFF";
// Odd
var sp_oddbgcolor="#FFFFFF";
var sp_oddfontcolor="#000000";



// No need to edit beyond here



function sp_setZebras(){
for(var i=0;i<document.getElementsByTagName('tr').length;i++){
document.getElementsByTagName('tr')[i].id=i;
if(document.getElementsByTagName('tr')[i].id%2==1){
document.getElementsByTagName('tr')[i].style.backgroundColor=sp_evenbgcolor;
document.getElementsByTagName('tr')[i].style.color=sp_evenfontcolor;
}else{
document.getElementsByTagName('tr')[i].style.backgroundColor=sp_oddbgcolor;
document.getElementsByTagName('tr')[i].style.color=sp_oddfontcolor;
}
}
}

</script>
<style>
td{border:1px solid black;height:25px;padding-left:20px;width:100px;font-weight:bold;}
</style>
</head>
<body onload="sp_setZebras();">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</body>
</html>
canadianjameson
01-23-2006, 03:47 PM
you know, i just realised that this is the "post a javascript" section and i'm accidentally highjacking shlags post.

If you want to either pm me or have me start my own thread, lemme know :)

or hey, post it as a new javascript.

sorry shlag :o
canadianjameson
01-23-2006, 11:26 PM
i started the post here: http://www.codingforums.com/showthread.php?t=77710
Basscyst
01-27-2006, 08:50 PM
Here's a similar script I wrote that has a nice little added dynamic.


<html>
<head>
<script type="text/javascript">
function setHighlights(tbl_id,col1,col2)
{
var tbl=document.getElementById(tbl_id);
var trs=tbl.getElementsByTagName('tr')
var len=trs.length;
for(var i=1;i<len;i++)
{
if(i%2)
{
var b_color=col1;
}
else
{
var b_color=col2;
}
trs[i].style.backgroundColor=b_color;
}
}

function getColNumber(obj)
{
var dad=obj.parentNode;
var kids=dad.getElementsByTagName('td');
len3=kids.length;
for(var k=0;k<len3;k++)
{
if(kids[k]==obj)
{
return k;
}
}
}

function highlightColumn(obj)
{
var num=getColNumber(obj);
var tbody=obj.parentNode.parentNode;
var tr=tbody.getElementsByTagName('tr');
var len1=tr.length;
var bgcol='yellow';
weight='bold';
if(obj.style.backgroundColor=='yellow')
{
bgcol='';
weight='normal';
}
obj.style.fontWeight=weight;
for(var i=0;i<len1;i++)
{
var td=tr[i].getElementsByTagName('td');
var len2=td.length;
if(i==0)
{
var th=tr[i].getElementsByTagName('th');
th[num+1].style.fontWeight=weight;
col_txt=th[num+1].innerHTML;
}
for(var j=0;j<len2;j++)
{
if(obj.parentNode==tr[i] && j <= num)
{
td[j].style.backgroundColor=bgcol;
var flg=1;
if(j==0)
{
var row_hd=tr[i].getElementsByTagName('th');
row_hd[0].style.fontWeight=weight;
var row_txt=row_hd[0].innerHTML;
}
}
else if(num==j && flg != 1)
{
td[j].style.backgroundColor=bgcol;
}
}
}
obj.setAttribute('title',row_txt + "," + col_txt);
}

function setHandlers(obj_id)
{
var obj=document.getElementById(obj_id);
var tds=obj.getElementsByTagName('td');
var len2=tds.length;
for(var h=0;h<len2;h++)
{
tds[h].onmouseover=function(){highlightColumn(this);};
tds[h].onmouseout=function(){highlightColumn(this);};
}
}

window.onload=function()
{
setHighlights('table1','#D2E4FC','#ECF4FE');
setHandlers('table1');
}
</script>
<style type="text/css">
#table1
{
border-collapse:collapse;
width:50%;
}
#table1 tbody tr th
{
background-color:#0075EB;
color:#FFFFFF;
font-weight:normal;
padding:0px;
border:solid 1px #000000;
}
#table1 tbody tr td
{
border:solid 1px #000000;
padding:3px;
cursor:crosshair;
}
</style>
</head>
<body>
<table id="table1">
<tbody>
<tr>
<th>&nbsp;</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
</tr>
<tr>
<th>Row 1</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
<tr>
<th>Row 2</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
<tr>
<th>Row 3</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
<tr>
<th>Row 4</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
</tbody>
</table>
</body>
</html>


Basscyst