By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,743 Members | 1,028 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,743 IT Pros & Developers. It's quick & easy.

Alternate row colour

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.