You can try my sample code below. I used javascript function that takes a parameter
id from the
onload event of the body tag. Now, all you have to do is to have a workaround on how to get the value of each child elements of the rows/cells if such rows/cells contain child elements like the
<span> element and assign the appropriate color for each rows/cells.
<html>
<head>
</head>
<script type="text/javascript">
function setRowColor(id) {
var table = document.getElementById("myTable");
for (var i = 1; i < table.rows.length; i++) {
var value = table.rows[i].cells[0].innerHTML.toUpperCase();
var color = "";
var bgcolor = "white";
switch(value) {
case "IS": color = "green"; bgcolor = "black"; break;
case "OS": color = "red"; break;
case "PO": color = "blue"; break;
default: color = "orange"; bgcolor="black"; break;
}
table.rows[i].cells[0].style.color = color;
table.rows[i].cells[0].style.backgroundColor = bgcolor;
table.rows[i].cells[1].style.color = color;
table.rows[i].cells[1].style.backgroundColor = bgcolor;
}
};
</script>
<body onload="setRowColor('myTable')">
<table border=1 id="myTable">
<tr>
<th>Name</th>
<th>Color</th>
</tr>
<tr>
<td>IS</td>
<td>Green</td>
</tr>
<tr>
<td>OS</td>
<td>Red</td>
</tr>
<tr>
<td>PO</td>
<td>Blue</td>
</tr>
<tr>
<td>Unknown</td>
<td>Orange</td>
</tr>
</table>
</body>
</html>