This question about Missing functionality: Answered

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

Screen Shot 2012-09-29 38.png

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

Screen Shot 2012-09-29 1.png

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

Screen Shot 2012-09-29 2.png

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
Topic attachments
I Attachment Action Size Date Who Comment
Screen_Shot_2012-09-29_1.pngpng Screen_Shot_2012-09-29_1.png manage 53 K 30 Sep 2012 - 02:03 VickiBrown Screenshot 1
Screen_Shot_2012-09-29_2.pngpng Screen_Shot_2012-09-29_2.png manage 19 K 30 Sep 2012 - 02:04 VickiBrown screen shot 2
Screen_Shot_2012-09-29_38.pngpng Screen_Shot_2012-09-29_38.png manage 18 K 30 Sep 2012 - 02:09 VickiBrown screen shot
Topic revision: r5 - 15 Dec 2014, VickiBrown - This page was cached on 11 Jan 2018 - 01:13.

The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License