469,270 Members | 1,763 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

Alternate row colour

Hi all,

I am generating a html based table with multiple rows of data coming
in real time from a postgres DB. The underlying technology is java
based however the front end is html.

now i am unable to alternate the colour of every row so that the table
is lot more readable. can anyone suggest a javascript or even a css
script which will alternate the row colours irrespective of the number
of rows.

thanks.

Dec 9 '05 #1
4 1964
VK

sc*****@gmail.com wrote:
Hi all,

I am generating a html based table with multiple rows of data coming
in real time from a postgres DB. The underlying technology is java
based however the front end is html.

now i am unable to alternate the colour of every row so that the table
is lot more readable. can anyone suggest a javascript or even a css
script which will alternate the row colours irrespective of the number
of rows.


Difficult to say exactly w/o knowing how your data is coming to the
browser: as a pre-generated HTML code or some raw data you're using to
populate your table?

Something like (pseudo-code):

var oddRowColor = '#FFFFFF';
var evenRowColor="'#C0C0C0';
[loop]
objRow[i].style.backgroundColor = (i%2) ?
oddRowColor : evenRowColor;
[/loop]

Dec 9 '05 #2
The follwing code will automatically draw colours to the table. The css
is defined and the body onload function calls the alternate function
which gives alternate colours to the table...
Hope this will be useful to you!

<html>

<head>
<title>EXERCISE 2</title>
<script language="javascript">
function alternate(id)
{
if(document.getElementsByTagName)
{
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++)
{
if(i % 2 == 1)
rows[i].className = "even";
else
rows[i].className = "odd";
}
}
var tableid = document.getElementsByTagName("table");
}
</script>
<style>
..odd
{
background-color: white;
}
..even {
background-color: pink;
}

</style>
</head>

<body onload="alternate('TableID')">

<table border="1" id="TableID" class="sort-table">
<thead>
<tr>
<td><b>Column1</b></td>
<td><b>Column2</b></td>
<td><b>Column3</b></td>
</tr>
</thead>
<tr>
<td>1</td>
<td>one</td>
<td>This is a test code</td>
</tr>
<tr>
<td>2</td>
<td>two</td>
<td>This will work</td>
</tr>
<tr>
<td>3</td>
<td>three</td>
<td>This will automaically</td>
</tr>
<tr>
<td>4</td>
<td>four</td>
<td>give color to the table</td>
</tr>
<tr>
<td>5</td>
<td>five</td>
<td>alternatively using a css</td>
</tr>
<tr>
<td>6</td>
<td>six</td>
<td>using the body onload </td>
</tr>
<tr>
<td>7</td>
<td>seven</td>
<td>function</td>
</tr>
</table>

</body>

</html>

Dec 9 '05 #3
wrote on 09 dec 2005 in comp.lang.javascript:
I am generating a html based table with multiple rows of data coming
in real time from a postgres DB. The underlying technology is java
based however the front end is html.

now i am unable to alternate the colour of every row so that the table
is lot more readable. can anyone suggest a javascript or even a css
script which will alternate the row colours irrespective of the number
of rows.


I suggested this in 2003 on usenet:
[use childNodes(1) if you have a <thead> before the <tbody>,
even if the <tbody> is not explicitly declared]
<script type='text/javascript'>
i=0
x=document.getElementById('tbl').childNodes(0).chi ldNodes
while(i< x.length) {
if (i % 2)
x(i).style.backgroundColor="#eee"
else
x(i).style.backgroundColor="#aaa"
i++
}
</script>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Dec 9 '05 #4
K S Jayakumar wrote:
The follwing code will automatically draw colours to the table. The css
is defined and the body onload function calls the alternate function
which gives alternate colours to the table...
Hope this will be useful to you!

<html>

<head>
<title>EXERCISE 2</title>
<script language="javascript">
The language attribute is deprecated, type is required:

<script type="text/javascript">



function alternate(id)
{
if(document.getElementsByTagName)
{
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++)
{
if(i % 2 == 1)
rows[i].className = "even";
That will give the odd rows a class of 'even' (not that it really
matters but it might be confusing). A simpler test is:

if( i%2 )
rows[i].className = "even";

else
rows[i].className = "odd";
You can also get rid of the else statement - give all rows a set colour
then just change the the even (or odd) ones. Since you have set all the
odd ones to white:

for(var i=0, len=rows.length; i<len; i+=2) {
rows[i].className = "even";
}

}
}
var tableid = document.getElementsByTagName("table");
Left over from debug?

}
</script>
<style>
The type attribute is required for style elements too:

<style type="text/css">

.odd
{
background-color: white;
}
.even {
background-color: pink;
}

</style>
</head>

<body onload="alternate('TableID')">

<table border="1" id="TableID" class="sort-table">
<thead>
<tr>
<td><b>Column1</b></td>
<td><b>Column2</b></td>
<td><b>Column3</b></td>
</tr>
</thead>
If you don't want the header rows included in the row count, put in a
tbody element and use that as a reference instead of the table:

<tbody id="...whatever...">
<tr> [...]
</tr>
</tbody>
</table>

</body>

</html>

--
Rob
Dec 9 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by aznFETISH | last post: by
5 posts views Thread by User | last post: by
1 post views Thread by news | last post: by
6 posts views Thread by sconeek | last post: by
2 posts views Thread by viveklinux | last post: by
3 posts views Thread by Charles Law | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.