Dynamically colouring table cells

**Tonyp543212003** · 11-17-2009, 04:19 PM

I have a table rendered from an external source in this format:

<table>
<tr class="ms-vb">
<td>October 2009</td>
<td>/\</td>
<td>/\</td>
<td>##</td>
<td>##</td>
<td>/\</td>
etc...
</tr>
</table>

I want to colour the cells depending on the content. e.g ## = red, /\ = green, etc... I can’t make any changes to the rendered html so it has to be done dynamically using JavaScript.

Does anyone know how to do this? Any help would be greatly appreciated. I could do this easily if there was an id created dynamically but without that I’m not sure how to colour the cells individually.

Thanks,
Tony

**Tonyp543212003** · 11-17-2009, 05:06 PM

**vwphillips** · 11-17-2009, 05:27 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<table>
<tr class="ms-vb">
<td>October 2009</td>
<td>/\</td>
<td>/\</td>
<td>##</td>
<td>##</td>
<td>/\</td>
etc...
</tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/
var tables=document.body.getElementsByTagName('TABLE');
 for (var rows,cells,z0=0;z0<tables.length;z0++){
  rows=tables[z0].rows;
  for (var z0a=0;z0a<rows.length;z0a++){
   cells=rows[z0a].cells;
   for (var txt,z0b=0;z0b<cells.length;z0b++){
    txt=cells[z0b].innerHTML;
    if (txt=='/\\'){
     cells[z0b].style.backgroundColor='red';
    }
    else if (txt=='##'){
     cells[z0b].style.backgroundColor='green';
    }
   }
  }
 }


/*]]>*/
</script>
</body>

</html>

**Tonyp543212003** · 11-17-2009, 07:37 PM

Wow thats fantastic vic, you really know your stuff. I have been stuck on this problem on and off for months trying different approaches.

Thanks!!

Thread: Dynamically colouring table cells

Thread Tools

Search Thread

Dynamically colouring table cells

What i have got so far...doesnt work

thanks

Bookmarks

Bookmarks

Posting Permissions