changing background color

I am looking to be able to dynamically change background colors on the form to show what required fields that need to be filled out on a drop down.

I am having a problem changing the color of a cell in a table when it in a JSF table. I don’t have problems changing colors for other elements on the form but just a few cells in row - it takes effect because when adding a new row the color shows but doesn’t show for the existing row.

Maybe there is an easier way of doing than what I had to go through to get access to the control…

var inputs=document.getElementsByTagName ('*');
for (var i=0;i<inputs>=var1.length) {

alert(“found match:”+inputs[i].id.substr(tmpMinusFromEnd-1)+":"+var1);
return inputs[i];}
return null;

var selValue = CAF.model("#{activePageBean.clientIds[‘caseTypeSelectMenu’]}").selected()[0].getValue();
var clientAdvTable=CAF.model("#{activePageBean.clientIds[‘advPartyDataTable’]}");
var clientAdvRows=clientAdvTable.list();
var rowCount=0;
var validApRowExists=false;
for (var i = 0; i < clientAdvRows.length; i++) {
var clientAdvRow=clientAdvRows[i];
var clientAdvTypeID=clientAdvRow.getControlId(“apTypeSelectMenu”);
var ClientAdvType=CAF.model(clientAdvTypeID);
var clientAdvTypeValue=ClientAdvType.getValue();
var clientAdvNameID=clientAdvRow.getControlId(“apNameSelectMenu”);
var clientAdvName=CAF.model(clientAdvNameID);
var clientAdvNameValue=clientAdvName.getValue();
var selValue = CAF.model("#{activePageBean.clientIds[‘caseTypeSelectMenu’]}").selected()[0].getValue();
if(selValue==“a value” ){
// testing removing row from form and re-adding it
var temp =clientAdvTypeIDjs.parentNode.parentNode.parentNode.parentNode.cloneNode(true);

// clientAdvTypeIDjs.parentNode.parentNode.value=’’;
// alert(“1”);
//’ #FFCC66’;
} else {‘red’;‘red’;

You can use the prototype javascript library (version 1.5.1 in webmethods 7.1.x; see to simplify some things. In particular, try using Element.up() to find the table, row, or cell element from a control in the table:

var clientAdvTable = CAF.model("#{activePageBean.clientIds[‘advPartyDataTable’]}");
var clientAdvRows = clientAdvTable.list();
for (var i = 0; i < clientAdvRows.length; i++) {
var clientAdvTypeID = clientAdvRows[i].getControlId(“apTypeSelectMenu”);
// find table cell
var td = Element.up(clientAdvTypeID, “td”);
// set cell’s bg color = “#FFCC66”;


Why doesn’t this work?

var rdbutton = CAF.model(’#{activePageBean.clientIds[‘rdbutton’]}’);

function changerdcolor()

Firebug says “ not defined.”

To access actual DOM element use following syntax:


Brilliant. Thanks Alex.