Highlighting current ADF Table row by Javascript

Hi,

I played a little bit with adf table row highlighting this afternoon.
See demonstration.

I found maybe not better (in comparison to my previous post) but definitely easier solution based only on javascript.

Some notes:
- solution depends on structure of generated html table so if the structure is changed in next JDeveloper version (I used 10.1.3.1), the code will not work
- I don't think it will work without modification when there is a partial rendering used inside the table. I didn't test it.

Implementation into your page is easy:

1. Add javascript code to your application (source is bellow)
2. Add reference to the javascript into your page
3. Add onload="onBodyLoad()" to body tag
4. Edit javascript code and change firstRadioId variable value. It is "result id" of af:tableSelectOne element. If you don't know this result id, just set the element id to some value, run page and find it in html source code. Default value is 'table:0:rowSel' so you can also set table id to table, tableSelectOne id to rowSel, use af:form instead of h:form and then leave the firstRadioId value unchanged

Javascript source code (highlihgt.js):

var currentRowColor = '#ddddff';
var selectedRowColor = '#ffcccc';
var firstRadioId = 'table:0:rowSel';

var lastRow;
var lastBackgroundColors = new Array();
var lastSelRow;
var lastSelBackgroundColors = new Array();

function mouseOverRow(tableRow) {
var j = 0;
for (var i = 0; i < tableRow.childNodes.length; i++) {
lastBackgroundColors[j++] = tableRow.childNodes[i].style.backgroundColor;
tableRow.childNodes[i].style.backgroundColor = currentRowColor;
if (tableRow.childNodes[i].firstChild) {
if (tableRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
  lastBackgroundColors[j++] = tableRow.childNodes[i].firstChild.style.backgroundColor;
  tableRow.childNodes[i].firstChild.style.backgroundColor = currentRowColor;
}
}
}
lastRow = tableRow;
}

function mouseOutOfRow(currentRow) {
if (lastRow) {
var j = 0;
for (var i = 0; i < lastRow.childNodes.length; i++) {
var bgcolor;
if (lastSelRow && currentRow == lastSelRow) {
  bgcolor = selectedRowColor;
} else {
  bgcolor = lastBackgroundColors[j++];
}
lastRow.childNodes[i].style.backgroundColor = bgcolor;
if (lastRow.childNodes[i].firstChild) {
  if (lastRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
    if (lastSelRow && currentRow == lastSelRow) {
      bgcolor = selectedRowColor;
    } else {
      bgcolor = lastBackgroundColors[j++];
    }
    lastRow.childNodes[i].firstChild.style.backgroundColor = bgcolor;
  }
}
}
}
}

function highlightRow(selectedRow) {
if (lastSelRow && lastSelRow == selectedRow) {
return;
}

var j;
if (lastSelRow) {
j = 0;
for (var i = 0; i < lastSelRow.childNodes.length; i++) {
lastSelRow.childNodes[i].style.backgroundColor = lastSelBackgroundColors[j++];
if (lastSelRow.childNodes[i].firstChild) {
  if (lastSelRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
    lastSelRow.childNodes[i].firstChild.style.backgroundColor = lastSelBackgroundColors[j++];
  }
}
}
}

if (selectedRow.childNodes[0] && selectedRow.childNodes[0].firstChild) {
rowSelector = selectedRow.childNodes[0].firstChild;
rowSelector.checked = true;
}

j = 0;
for (var i = 0; i < selectedRow.childNodes.length; i++) {
lastSelBackgroundColors[j] = lastBackgroundColors[j];
j++;
selectedRow.childNodes[i].style.backgroundColor = selectedRowColor;
if (selectedRow.childNodes[i].firstChild) {
if (selectedRow.childNodes[i].firstChild.nodeName.toLowerCase() == 'input') {
  lastSelBackgroundColors[j] = lastBackgroundColors[j];
  j++;
  selectedRow.childNodes[i].firstChild.style.backgroundColor = selectedRowColor;
}
}
}
lastSelRow = selectedRow;
}

function onBodyLoad() {
if (document.getElementById(firstRadioId)) {
var tableRow = document.getElementById(firstRadioId).parentNode.parentNode;
while (tableRow) {
tableRow.onmouseover = function() {mouseOverRow(this);}
tableRow.onmouseout = function() {mouseOutOfRow(this);}
tableRow.onclick = function() {highlightRow(this);}
tableRow = tableRow.nextSibling;
}
}
}

Update:
Today I found I have problem when the table contains page navigation. I will try to solve the problem soon.

Rado