JavaScript cell coloring code works as expected in TWiki, fails in Foswiki

Issue

I have some JavaScript / CSS code that is designed to change the background-color of a table cell (<td>) based on the text content of the cel. This code works in TWIki (4, 5 and 6) but fails in Foswiki. Apparently Foswiki's default CSS for the table row is overriding the CSS class defined for the cell.

Example

Sample Table

Status	Matches?
Yellow	Match
Green	Match
Red	Match
Green: today only	Match if start of text and colon
A red apple and a green grape	No match

What You Should See

The JS and CSS Code

<style type="text/css">
.cell_red { background-color: #f44; text-transform:uppercase; font-weight:bold}
.cell_yellow { background-color: #ff4; }
.cell_green { background-color: #4f4; }
.cell_red, .cell_yellow, .cell_green { text-align:center; text-transform:uppercase; }
</style>

<script type="text/javascript">
 // define the magic words
  var cn=Array('red', 'green', 'yellow');
  
  var cells=document.getElementsByTagName('td');
  for(var i=0; i<cells.length; i++) {
     var text=cells[i].innerHTML.toLowerCase();  // squash case
     text = text.replace(/<.*?>/g, '')  // remove any html tags, e.g. <div...>
     text = text.replace(/\//g, '');    // remove any / characters (e.g. n/a becomes na)
     text = text.replace(/\-/g, '');    // remove any - characters (e.g. follow-up)
     text = text.replace(/\s+/g, '');   // Strip out spaces (e.g. 'readyforreview')
  
     var ncn=null;
     for (var ci=0; ci<cn.length; ci++) {
         // exact match 
         // complete cell contents (without spaces) is a magic word
         if (text == cn[ci]) {
             ncn = ' cell_' + cn[ci];
             break;
         }
  
         // partial match
         // magic word at beginning of cell, followed by a colon
         //       ^magicword: 
         var re = new RegExp("^" + cn[ci] + ":", "i");
         var result = re.exec(text);
         if (result != null) {
             ncn = ' cell_' + cn[ci];
             break;
         }
     }
     if (ncn) { cells[i].className += ncn; }
  }
</script>

Troubleshooting

According to the debug console, the JavaScript-modified code for the table is

and the "winning" CSS for the yellow table cell background-color: transparent; as defined by

I need the CSS for td class cell_yellow to work:

media="all"
 .cell_yellow {
background-color: #FF4;
text-align: center;
}

and override the td default assigned by Foswiki here

.foswikiTable#tableWikiTutColorTable2 tr.foswikiTableRowdataBg0 td {
background-color: transparent;
}

I'm guessing (because my CSS knowledge is sometimes marginal), but it looks like the row is defining the background color for each of the cells in that row?

I would have thought that my cell-defined CSS class should still override that... shouldn't it?

Is there a workaround? Do I need to undefine some default CSS class first?

Or is this a bug in the Foswiki CSS source? (Why is a td background color being defined at all? The row background color should handle that. )

It should be possible for a user to override the CSS code for a given cell, especially as this was fairly easy to do in TWiki.)

-- VickiBrown - 30 Sep 2012

.foswikiTable#tableWikiTutColorTable2 tr.foswikiTableRowdataBg0 td has higher specificity than .cell_yellow. See: What the Heck Is CSS Specificity?.

You can try to use .foswikiTable tr td.cell_yellow. Otherwise add !important to override:

.cell_yellow {
background-color: #FF4 !important;
text-align: center !important;
}

-- ArthurClemens - 30 Sep 2012

Thanks, that does work.

However, I would like to point out that it shouldn't be necessary (it violates the Principle of Least Surprise).

-- VickiBrown - 15 Dec 2014

QuestionForm edit

Subject	Missing functionality
Extension
Version	Foswiki 1.1.9
Status	Answered
Related Topics

I	Attachment	Action	Size	Date	Who	Comment
png	Screen_Shot_2012-09-29_1.png	manage	53 K	30 Sep 2012 - 02:03	VickiBrown	Screenshot 1
png	Screen_Shot_2012-09-29_2.png	manage	19 K	30 Sep 2012 - 02:04	VickiBrown	screen shot 2
png	Screen_Shot_2012-09-29_38.png	manage	18 K	30 Sep 2012 - 02:09	VickiBrown	screen shot