Trouble alternating table row colors using Javascript (not jQuery)

benjamin.morgan

benjamin.morgan

New Member
I know, I could use jquery but this isn't about that. I want to be able to alternate a table's row colors, but it isn't working. I have the code in a jsfiddle so you can run it (or edit it). Any help appreciated and letting me know where it went wrong is appreciated too.

http://jsfiddle.net/Ws34g/

HTML: 
<!DOCTYPE HTML>
<html lang="en">
<head>
<style> 
  .odd{background-color: white;}  
  .even{background-color: gray;}  
</style> 
</head>
<body>
<table> 
<tr><td>0 - some txt</td></tr> 
<tr><td>1 - some txt</td></tr> 
  <tr><td>2 - some txt</td></tr> 
  <tr><td>3 - some txt</td></tr> 
  <tr><td>4 - some txt</td></tr>   
</table> 

	<script>

 * *var rows = getElementsByTagName("tr"); 
 * *for(i = 0; i < rows.length; i++){ * * * * *
 * * *if(i % 2 == 0){
 * * * *rows[i].className = "even";
 * * *}else{ <br>
 * * * *rows[i].className = "odd"; 
 * * *} * * *
}
	</script>
</body>
</html>
 
benjamin.morgan

benjamin.morgan

New Member
Thanks Ronald, I still want to know why the Javascript version isn't working. I am learning javascript right now and just kindof trying to figure out some of the simple things.
 
ronaldroe

ronaldroe

Super Moderator
Staff member
I'm still learning JS myself. I played with it some, even tried some off-the-top-of-my-head jQuery. No dice.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
yes you probably can do it with jquery, but you should use css to do that.

best to use javascript for behaviour rather than style. thats more its purpose.
 
ronaldroe

ronaldroe

Super Moderator
Staff member
Phreaddee said:
yes you probably can do it with jquery, but you should use css to do that.

best to use javascript for behaviour rather than style. thats more its purpose.
Click to expand...

Yeah. That's where I went with it, but he's bent on JS, I assumed just for the experience. So, I thought I'd take a crack at it for the same reason.
 
benjamin.morgan

benjamin.morgan

New Member
Yes, I was trying it for the experience. jQuery would be a lot simpler. And tr.nth-child(2n) would be even more simple.

$(document).ready(function() {
$('tr:even').css('background', 'blue');
});
Click to expand...

or

$(document).ready(function() {
$('tr:even').addClass('even');
});
Click to expand...

I just can't seem to translate that to regular Javascript.
 
Last edited:
Phreaddee

Phreaddee

Super Moderator
Staff member
Pretty sure there's something like:
tr:nth-child(even)
Click to expand...
there sure is, and odd as well.

this site is gold...
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

remember by adding styles with javascript/jquery you are in effect adding inline styles to the html.
this is something we try to avoid with html/css, why then do you suggest that this rule doesnt or wouldn't apply to js as well??

particularly when it's possible, and preferrable to do so with css.

I understanding learning things for the sake of learning but...

add a class, sure. but dont add css via js (unless you really need to - ie there is no other way!)
 
Last edited:
You must log in or register to reply here.
Top