Well if you want to iterate through the color array you could apply it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function (){
var bgcolor = new Array("red", "blue", "green");
var elementSelection = $('.colorflag');
var iter = 0;
jQuery.each(elementSelection, function(i,val) {
if(iter == bgcolor.length){
iter=0;
}
$(this).css("background-color",bgcolor[iter]);
iter++;
});
});
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td>label</td>
</td><td class="colorflag">data#1</td>
</tr>
<tr>
<td>label</td>
<td class="colorflag">data#2</td>
</tr>
<tr>
<td>label</td>
<td class="colorflag">data#3</td>
</tr>
<tr>
<td>label</td>
<td class="colorflag">data#4</td>
</tr>
<tr>
<td>label</td>
<td class="colorflag">data#5</td>
</tr>
<tr>
<td>label</td>
<td class="colorflag">data#6</td>
</tr>
</table>
</body>
</html>
I assigned colorflag classes to certain td's in the table show you how to target and color only certain td's inside a table. A quick breakdown of what this script is doing:
$(function (){
This is a jQuery function that says to hold off on executing any jquery functions until the jquery library and page dom have been loaded.
var bgcolor = new Array("red", "blue", "green");
var elementSelection = $('.colorflag');
These are actually both arrays- one is an array of the colors, the other is an array of dom objects found. In this case it's all the objects with the class of "colorflag"
var iter = 0;
Starting value for our loop count
jQuery.each(elementSelection, function(i,val) {
jQuery function to execute a list of commands to every matched element. Since our target is elementSelection which is an array of objects with the class colorflag, this list of commands will be executed once for each element with the colorflag class.
if(iter == bgcolor.length){
iter=0;
}
if the number of times (iter) that the commands have been executed equals the number of colors, set the number of times count back down to zeros so we car start assigning colors from the beginning of the list.
$(this).css("background-color",bgcolor[iter]);
target the particular matched object using "this" keyword and apply the background color from our list of colors to the background of the matched element. If you wanted to use hex values you could, just make sure to include the # before the number when setting up the array.
iter++;
increase the count for how many times the commands have been executed
});
});
close our each function and then close our jquery page ready function