• Do not register here on develop.twiki.org, login with your twiki.org account.
• Use View topic Item7848 for generic doc work for TWiki-6.1.1. Use View topic Item7851 for doc work on extensions that are not part of a release. More... Close
• Anything you create or change in standard webs (Main, TWiki, Sandbox etc) will be automatically reverted on every SVN update.
Does this site look broken?. Use the LitterTray web for test cases.

Item5983: TABLE attributes should nbot override JavaScript defined on the current page

Item Form Data

AppliesTo: Component: Priority: CurrentState: WaitingFor: TargetRelease ReleasedIn
Extension TablePlugin Normal No Action Required   n/a  

Edit Form Data

Reported By:
Applies To:
Current State:
Waiting For:
Target Release:
Released In:



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).


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; }

<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];
         // 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];
     if (ncn) cells[i].className = ncn;


We have recently discovered that the JavaScript background coloring no longer works if the table settings include

That is

In this example the cells are colored

| *A* | *B* | *C* | *D* | *E* | 
| completed | flagged | na | x | yellow |

completed flagged na x yellow

in this example they are not

| *A* | *B* | *C* | *D* | *E* | 
| completed | flagged | na | x | yellow |

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


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

-- VickiBrown - 03 Sep 2008

SeanCMorgan proposes the following

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:


I'm sorry. This violates both "The Principle of Least Surprise" and Backward Compatibility (breaking pages that used to work as expected.)

JavaScript code running on the page should not be considered "part of the skin". JavaScript code at the end of the page should be run after everything else. The entire point of putting JavaScript into a page is to override what was staticly on the page.

It's difficult enough in TWiki to force JavaScript to run "on load" (I looked at TWiki:TWiki.SkinsAndJavaScript. It's two years old and didn't solve the problem.)

-- VickiBrown - 05 Sep 2008

Add !important to your styles. See TWiki:Support.TablePluginSettngsOverrideJavaScript.

-- TWiki:Main.ArthurClemens - 07 Sep 2008

Summary TABLE attributes should nbot override JavaScript defined on the current page
ReportedBy TWiki:Main.VickiBrown

SVN Range TWiki-5.0.0, Mon, 18 Aug 2008, build 17431
AppliesTo Extension
Component TablePlugin
Priority Normal
CurrentState No Action Required


TargetRelease n/a

Edit | Attach | Watch | Print version | History: r2 < r1 | Backlinks | Raw View |  Raw edit | More topic actions
Topic revision: r2 - 2008-09-07 - ArthurClemens
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2021 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback