Question

My first thought is that this problem is due to a recent upgrade to TablePlugin. However, I could be wrong about that. I only know that changing setting in TablePlugin makes the problem go away, the problem is new, and TablePlugin was recently updated (as were several other plugins and several JS libraries).

Background

We have JavaScript code that colors table cells, based on their content. (It does this after the table has been converted to HTML.)

<style type="text/css">
  /*  
    Color Table Cells based on contents ("magic words")    
    First, define "magic word" CSS classes. 
    Format is always .cell_word                              
    where word is lower case, no spaces or punctuation    
    background color and text style as desired.
    Make sure that all magic words are also in the javascript
    section (below) 
  */
  .cell_completed { background-color: #009933; text-align:center; }
  .cell_flagged { background-color: #ff4444; color: #ffff00; text-align:center; font-weight:bold; text-transform:uppercase; }
  .cell_na { background-color: #99FFFF; text-align:center; }
  .cell_x { background-color: #9EB0A0; text-align:center; }
  .cell_yellow { background-color: #ffff00; text-align:center; }
</style>

<script type="text/javascript">
  // define the magic words
  var cn=Array('completed', 'flagged', 'na', 'tracking', 'x', '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(/\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>     

Problem

   databg="#FFFFFF"

That is

In this example the cells are colored

%TABLE{}%
| *A* | *B* | *C* | *D* | *E* | 
| completed | flagged | na | x | yellow |

in this example they are not

%TABLE{databg="#FFFFFF"}%
| *A* | *B* | *C* | *D* | *E* | 
| completed | flagged | na | x | yellow |

It seems to me that JavaScript should always run last and therefore override any HTML settings. But, I don't know a lot about JavaScript.

We have also updated various JS libraries and such lately. If this is issue is more likely being caused by something unusual in the JS, rather than in something TablePlugin is doing, please enlighten me.

-- TWiki:Main/VickiBrown - 03 Sep 2008

Environment

TablePlugin 1.032, $Rev: 16549 (20 Mar 2008)

-- VickiBrown - 03 Sep 2008

Answer

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.

According to the section, "TablePlugin and CSS", in TablePlugin:

TablePlugin implements the following precedence:

• the TABLEATTRIBUTE settings only write html styling, no CSS
• the TABLEATTRIBUTE settings can be overridden by a skin's CSS
• the TABLE tag attributes are converted to CSS styling, written in the head; these override any skin's CSS

Your javascript's CSS qualifies as "any skin's CSS". So now you can see how the TABLE tag attributes override your javascript, and the fix becomes obvious:

• Set TABLEATTRIBUTES = databg="#FFFFFF,#DDDDDD"

... well it works on my sandbox page. I guess that variable is set to FINAL in this web?

-- SeanCMorgan - 04 Sep 2008

I'm sorry. Why would JavaScript running in the page EVER qualify as "my skin's CSS"? This isn't in the skin., It's in the page.

The entire point of putting JavaScript into a page is to override what was staticly on the page.

This used to be the case. It should still be the case.

Smells like a bug to me.

-- VickiBrown - 05 Sep 2008

"Qualifies" was the wrong word. I meant that the styles used by your javascript were in a similar place in the cascade: but even that turns out not to be the case: skins are external sheets.

That you are using javascript is not relevant, what is important is where the styles are defined. In decreasing importance the cascade is: Inline style > Internal style sheet > External style sheet > Browser default.

Your javascript assigns classes which use an internal style sheet. But the TABLE tag is also an internal reference (see <!--TABLEPLUGIN_table2--> in this topic's HTML source). In the case of a tie like this, the later appearing one is supposed to win. But even though your style appears after the TABLE one, it is losing.

The problem might be that the TABLE styles are properly located in the HEAD, whereas your style is in the BODY. In that case, it appears that the HEAD is winning?

-- SeanCMorgan - 05 Sep 2008

...on 3rd thought, none of that addresses why this recently stopped working for you.

Another way of breaking ties uses a somewhat complicated weighted count of the number and types of elements in the style definition: with the upgrade, there are probably more of those in the plugin's styles.

You might be able to use the "! important" CSS flag to elevate the priority of yours (like I did here for cell_yellow in your second table), but it has browser-specific issues. You might need to do something silly like add a bunch of fake elements to your definition to increase its weighted count?

-- SeanCMorgan - 05 Sep 2008

Sean is right. In the short term you might want to add !important to the styles:

.cell_completed { background-color: #009933!important; text-align:center; }
.cell_flagged { background-color: #ff4444!important; color: #ffff00; text-align:center; font-weight:bold; text-transform:uppercase; }
.cell_na { background-color: #99FFFF!important; text-align:center; }
.cell_x { background-color: #9EB0A0!important; text-align:center; }
.cell_yellow { background-color:#ffff00!important; text-align:center; }

But we might also think of a way to add cell-specific styling to TablePlugin.

-- ArthurClemens - 07 Sep 2008