Alternate row colour

S

sconeek

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.
 
V

VK

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.style.backgroundColor = (i%2) ?
oddRowColor : evenRowColor;
[/loop]
 
K

K S Jayakumar

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.className = "even";
else
rows.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>
 
E

Evertjan.

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).childNodes
while(i< x.length) {
if (i % 2)
x(i).style.backgroundColor="#eee"
else
x(i).style.backgroundColor="#aaa"
i++
}
</script>
 
R

RobG

K said:
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:

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.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.className = "even";

else
rows.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.className = "even";
}

}
}
var tableid = document.getElementsByTagName("table");

Left over from debug?

}


</script>
<style>

The type attribute is required for style elements too:

.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:

<tr> [...]

</tr>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top