homepage Welcome to WebmasterWorld Guest from 54.161.200.144
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Setting row styles dynamically
Ananthi




msg:3243406
 7:04 pm on Feb 5, 2007 (gmt 0)

Hi

Is it possible to set the style class of a row dynamically?

Actually I want to apply different style for each rows .

for example:my first row bgcolor is green ,my second row bgcolor is red,

my third row bgcolor is blue and so on...

lam doesn't know how many rows a table has because it is dynamic.

 

Fotiman




msg:3243501
 8:46 pm on Feb 5, 2007 (gmt 0)

You could use JavaScript to get the collection of <tr> elements, then iterate through the collection appending a class to every other one.

mep00




msg:3243592
 10:46 pm on Feb 5, 2007 (gmt 0)

If by dynamic you mean server side, you could assign a different class to each group. There's also:

tbody:nth-child(3n+1){background-color:#0f0;}
tbody:nth-child(3n+2){background-color:#f00;}
tbody:nth-child(3n){background-color:#00f;}

But afaik, support is limited to Konqueror 3.4+ ([en.wikipedia.org ])

I guess it's time for everybody to move to Linux. ;)

Robin_reala




msg:3243616
 11:19 pm on Feb 5, 2007 (gmt 0)

Actually mep the correct code would be:

tr:nth-child(3n) { background-color: red; }
etc. etc.

element:nth-child(n) selects an element when it is the nth-child, not the nth-child of an element.

It looks like the next release of Opera [my.opera.com] will support this syntax as well, which will be nice.

mep00




msg:3243653
 12:27 am on Feb 6, 2007 (gmt 0)

Robin,

Thanks for the correction; I guess the "child" part threw me off. The funny thing is, a week or two ago I was experimenting and wrote a test page for nth-child, and there I used it correctly.

I suppose if I really wanted to use tbody instead on tr I could write:

tbody>*:nth-child... :)

Good new about Opera; it's a wonderful browser and I really like it, but I almost never seem to use. Go figure.

ericjust




msg:3244379
 6:13 pm on Feb 6, 2007 (gmt 0)

This should do the trick. You could easily modify this to color all tables.


<html>
<head>

<script language="javascript">
<!--
var tableRowColors = ['#00FF00','#FF0000','#0000FF'];

function colorTableRows(table_id) {
if (!document.getElementById(table_id)) return false;
var table = document.getElementById(table_id);
var rows = table.getElementsByTagName('TR');
var currentColorIndex = 0;
for (var i=0;i<rows.length;i++) {
if (currentColorIndex == tableRowColors.length) currentColorIndex = 0;
rows[i].style.backgroundColor = tableRowColors[currentColorIndex];
currentColorIndex++;
}
}
//-->
</script>

</head>

<body onload="colorTableRows('test_table');">

<table id="test_table">
<tr><td>hello</td></tr>
<tr><td>world</td></tr>
<tr><td>how</td></tr>
<tr><td>are</td></tr>
<tr><td>you?</td></tr>
</table>

</body>
</html>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved