Highlight dataTable row on click

[niki007]

Hi all,

I have a dataTable and I have a requirement like when I click on any row the row should be highlighted. I completed this task but there is a commandLink in the row of my dataTable and why I click it the row gets highlighted and the form gets submited and the highlighting goes away.

So I thought of storing the row(tr) in backingbean variable and access it in my page after the submit because the variable is still in the session.

function highlightOnClick() {
alert('inside highlight on click');
var trs = document.getElementById('form:data').getElementsByTagName('tbody')[0]
.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = new Function("setRow(this)");
}
}


function setRow(tr)
{
alert("set row tr"+tr);
document.getElementById('form:row').value=tr; //here is the problem should do something here.
alert(document.getElementById(form:row').value);
}


function highlightRow() {
var tr = document.getElementById('form:row').value;
alert("tr:"+tr);
tr.bgColor = (tr.bgColor != '#ff0000') ? '#ff0000' : '#ffffff';
}



the backing variable is a string and I am passing a <tr> object into it. Is there any way to store the value or attribute of the tr in the backingbean.

Is my approach right. Please suggest.

[Kor]

alert("set row tr"+tr);

The way you have coded, tr is the row element itself (an object) and the concatenation string+object has no sense. What in fact you want to pass? The row's index?

[niki007]

I need to pass row Id and I got it by adding an attirbute to dataTable and I got the result. Thanks for the reply.

[Kor]

Maybe:

for (var i = 0; i < trs.length; i++) {
trs[i].ind=i;//a custom created property
trs[i].onclick = function(){setRow(this.ind)};
}