Row Highlighting

Question

I am trying to find a thrad / example showing how to do row highlighting using javascript. I want to highlight a row in a report by clicking on it. It is supposed to remain highlighted until I either reload / submit the form or click on an other row. Mouseover and mouseout events are not desired :). Anyone with an idea?
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

Answer 1

Denes,
Here is the CSS and Javascript I use to achieve row highlighting on click..
<style type="text/css">
tr.odd td.t15data{background:#F4FFFD;}
tr td.t15data{background:#FFFFFF;}
tr.selected td.t15data{background:#D7D7D7;}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
function stripeTables() {
     var tables = document.getElementsByTagName("table");
     for (var m=0; m<tables.length; m++) {
          if (tables[m].className == "t15standard") {
               var tbodies = tables[m].getElementsByTagName("tbody");
               for (var i=0; i<tbodies.length; i++) {
                    var odd = true;
                    var rows = tbodies.getElementsByTagName("tr");
                    for (var j=0; j<rows.length; j++) {
                         if (odd == false) {
                              odd = true;
                         } else {
                              addClass(rows[j],"odd");
                              odd = false;
function lockRow() {
     var tables = document.getElementsByTagName("table");
     for (var m=0; m<tables.length; m++) {
          if (tables[m].className == "t15standard") {
                    var tbodies = tables[m].getElementsByTagName("tbody");
                    for (var j=0; j<tbodies.length; j++) {
                         var rows = tbodies[j].getElementsByTagName("tr");
                         for (var i=0; i<rows.length; i++) {
                              rows[i].oldClassName = rows[i].className
                              rows[i].onclick = function() {
                                   if (this.className.indexOf("selected") != -1) {
                                        this.className = this.oldClassName;
                                   } else {
                                        addClass(this,"selected");
addLoadEvent(stripeTables);
addLoadEvent(lockRow);
</script>
This will also stripe or do alternate row colors for you. If you do not want or need that functionality, just remove the stripeTables function and addLoadEvent(stripeTables)
Hope this helps.
-Chris