Rows highlighting

[Enrique Medina]

Hi,

Just a simple workaround until DataTable allows to do row highlighting:

<htm:style type="text/css">
    <x:outputText
        value="<!--
.tbl {
       width: 100%;
       border-collapse: collapse;
    }
    .tbl td {
       text-align: center;
    }
    .tbl th {
       text-align: left;
       background-color: #ebeadb;
       height: 20px;
    }
    .tbl .on {
       background-color: #faf9f4;
    }
    .tbl .off {
       background-color: #fff;
    }
    .tbl .hover {
       background-color: #ffb164;
    }
-->" />
</htm:style>

<htm:script>
    <x:outputText
        value="
<!--
    var elem = 'TR';

window.>   if(document.getElementsByTagName){
    var el = document.getElementsByTagName(elem);
      for(var i=0; i<el.length;
        i++){
        if(el[i].childNodes[0].tagName !='TH'
        && el[i].parentNode.parentNode.className.indexOf('tbl') !=-1){
        if(i%2 == 1){
        el[i].className='on'
        ;
       el[i]. this.className='on'
        ;
       }
    } else {
       el[i].className='off'
        ;
       el[i]. this.className='off'
        ;
       }
    }
       el[i].>         this.className='hover';
       }
      }
     }
  }
}
   //-->" />

</htm:script>

Please note that I'm using the htmLib tag library ;-)

Then, simply add to your <x:dataTable> the attribute styleClass="tbl", and it works like a charm!