Change color of background of row

[bluesfc2]

Can this be done?
Change background color a row of depending on cell data on that row. e.g Items
<table border="1">
<tr>
<td><b>Cost</b></td>
<td><b>Item</b></td>
</tr>
<tr>
<td>12</td>
<td>hats</td>
</tr>
<tr>
<td>34</td>
<td>socks</td>
</tr>
<tr>
<td>12</td>
<td>hats</td>
</tr>
<tr>
<td>12</td>
<td>hats</td>
</tr>
<tr>
<td>24</td>
<td>gloves</td>
</tr>
</table>
Any pointers in the right direction please

[Kor]

Originally Posted by bluesfc2

Change background color a row of depending on cell data on that row. e.g Items

Change background color when? When the user does what? Whenever we are talking about JavaScript, we must precise the users action, because this the essence of JavaScript - it is a client-side dynamic language.

[msevrens]

I think he literally means by the text in the data cells. Which you could do by like...

	var x = document.getElementsByTagName("td");
	
	for (i=0; i<x.length; i++){
		var b = x[i].innerHTML;
		
		if (b=="Item"){
			x[i].style.backgroundColor= "blue"
		}
		
		else if (b=="hats"){
			x[i].style.backgroundColor= "red"
		}
		
	}

That would literally set the color of the rows based on their content. But javascript is for functionality. Styling should be done with css, unless the its a style you want changed when the user does something.

it would be better just to give each cell with the same inside a class with the same name like

<td class="hats">hats</td>
<td class="socks">socks</td>
<td class="hats">hats</td>

then style it with css like:

.hats {
background-color: red;
}

.socks {
background-color: blue;
}