Applying alternate color to table rows using css

phanikiran · Dec 5, 2002

Hi all ,

I am new to css and i have an important task of colouring alternate rows of the table.

With the basic funda i managed to do in IE. but it is not working in netscape.

So please help me in this regard with a small program or example.

Thanks.

Kiran.

Tarwn · Dec 5, 2002

Here is a small example as requested:

Code:

<html>
<head>
<style>
   .row0{
      background-color:#ddddff;
   }
   .row1{
      background-color:#ffffff;
   }
</style>
</head>
<body>
<table>
   <tr class=&quot;row0&quot;>
      <td> stuff</td>
      <td> more stuff</td>
   </tr>
   <tr class=&quot;row1&quot;>
      <td> stuff</td>
      <td> more stuff</td>
   </tr>
   <tr class=&quot;row0&quot;>
      <td> stuff</td>
      <td> more stuff</td>
   </tr>
   <tr class=&quot;row1&quot;>
      <td> stuff</td>
      <td> more stuff</td>
   </tr>
</table>
</body>
</html>

That should be alternating light blue and light grey rows in your table.
Hope this helps,
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

phanikiran · Dec 5, 2002

Thanks Tarwn ,

But how to do that dynamically using javascript.

Again thanks for u r reply.

Kiran.

Tarwn · Dec 5, 2002

Hmm, I had an example I posted a while back, I'll repost it, there's no way I will find something that old (I don't even remember which forum it was posted to):

Code:

<html>
<head>
<script language=&quot;JavaScript&quot;>
<!--
function setBg(tableId){
	var tbl = document.getElementById(tableId)
	var color0 = &quot;#eeeeee&quot;
	var color1 = &quot;#ddddff&quot;

	var i;
	for(i = 0;i<tbl.rows.length;i++){
		eval(&quot;tbl.rows(i).style.backgroundColor = color&quot;+(i%2));
		alert(&quot;tbl.rows(i).style.backgroundColor = color&quot;+(i%2));
	} 
}
//-->
</script>
</head>
<body onLoad=&quot;setBg('myTable');&quot;>
<table id=&quot;myTable&quot; width=&quot;100%&quot;>
	<tr>
		<td>
			&nbsp;
		</td>
	</tr>
	<tr>
		<td>
			&nbsp;
		</td>
	</tr>
	<tr>
		<td>
			&nbsp;
		</td>
	</tr>
</body>
</html>

There you go. The function is called in the onLoad statement of the page with the id of the table we want to apply it to. It then loops through all of the rows in the table applying the color. A similar method would be to define the classes like I did in the static HTML example and then instead of changing the actual color just change the .className attribute
I'm not sure if changing the class name will refresh the look and feel though, anyone?

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

phanikiran · Dec 9, 2002

Tarwan thanks for u r code.

This is the code which i have written:

<html>

<STYLE TYPE="text/css">
TR.alt {font-size:8pt; background-color=#D7DBE7}
</STYLE>

<body onLoad="setRowColor()">

<script language="JavaScript">
function setRowColor(){
var altcolor = "alt";
var rows = document.all("vtable&quot

.rows;
for(r = 0; r < rows.length; r++){
if ((r==0) || (r % 2) == 0){
rows(r).className = altcolor;
}
}
}
</script>

<table id="vtable" border=0>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>

</body>
</html>

This works the same way as u r code but i need to work it in Netscape too .Have any idea on this.

Thanks,

Kiran

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Applying alternate color to table rows using css

phanikiran

Programmer

Tarwn

Programmer

phanikiran

Programmer

Tarwn

Programmer

phanikiran

Programmer

Similar threads

Part and Inventory Search

Sponsor