SID-00400: conditional formatting in TABLE or EDITTABLE

Status:	Answered	TWiki version:	4.2.4	Perl version:	5.6.1
Category:	TablePlugin	Server OS:	SUSE Linux 2.6.5	Last update:	16 years ago

Hi there,

I was wondering if anyone could point me in the right direction? I wanted to know if there was any way that I could do some conditional formatting by cell?

I have a EDITTABLE with selections that I then want the TABLE to style according to the value of the cell or cells in each row.

I am fairly new to this and I was looking for a way to do this without writing new plugin or modifying TABLE as they are not accessible to me.

Many thanks in advance ..

-- PaulGreen - 2009-07-07

Discussion and Answer

See TablePluginSettngsOverrideJavaScript.

-- SeanCMorgan - 2009-07-07

Sweet thx I will give it a shot.

-- PaulGreen - 2009-07-07

Hey Sean just to let you know that I got this working fine .. many thanks for the pointer.

Here is my JS example in case anyone else needs something similar.

%EDITTABLE{ format="| textarea, 2x35, Description | select, 1,  None, Paul | select, 1,  None, Paul | select,  1,  None, Team  |  label, 25, %SERVERTIME{"$day-$month-$ye"}% | date, 11, %DISPLAYTIME{$day-$month-$year}%, %d-%b-%Y | select, 1,  New, Plan, In Progress, Completed, On Hold !! |" changerows="on" initsort="6" }%
%TABLE{}%
| *Description* | *Assign1* | *Assign2* | *Team* | *Time Entered* | *ETC* | *Status* |
| Some new task | Paul | None | Team | 23-Jun-09 | 23-Jul-2009 | In Progress |

<style type="text/css">
  .cell_plan { background-color:#3399ff; color:#ffffff; font-weight:bold; text-align:center; vertical-align:middle; }
  .cell_old { background-color:red; color:#ffffff; text-align:center; vertical-align:middle; text-transform:uppercase; }
</style>

<script type="text/javascript">
  // define the magic words
  var cn=Array('completed', 'onhold', 'plan', 'inprogress');
  var today= new Date();
  var dateregex= new RegExp(/\d+.\w+.\d+/);
  
  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(dateregex.exec(text)) {
           var temp = new Array();
           temp = text.split('-');
           var newtext = temp[1] + ',' + temp[0] + ',' + temp[2];
           var nd = Date.parse(newtext);
           var todays = Date.parse(today);
             if(nd <= todays) {
                ncn = 'cell_old';
             }
       }

     }
     if (ncn) cells[i].className = ncn;
  }
</script>

-- PaulGreen - 2009-07-14

Thanks for sharing Paul!

-- PeterThoeny - 2009-07-16

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.