insertRow then attach an event to row 1

[stewartwebb]

Hi all,

Having a small problem which I hope is possible.

Basically i've inserted a row and cells at the end of my table.

var a=window.document.getElementById('topTable').insertRow(vRowsLength);
var b=a.insertCell(0);
var c=a.insertCell(1);
var d=a.insertCell(2);
var e=a.insertCell(3);
var f=a.insertCell(4);
b.innerHTML=document.form1.CHG_EFF_DATE.value;
c.innerHTML=document.form1.CHG_ACTIVITY.value;
d.innerHTML=document.form1.CHG_MAN_APP.value;
e.innerHTML=document.form1.CHG_PRINTER_ID.value;
f.innerHTML=document.form1.CHG_TEXT.value;

Now what i'm trying to do is attach an event (onMouseOver) so that when the user moves the cursor over the row I want to whole row to change colour. Is this possible?

Thanks.

 

[BabyJeffy]

Certainly. You would do something like this:

document.getElementById('cellID1').onmouseover = rollover;

The function called rollover() will now be performed when ever you put the mouse over the element with ID "cellID1". You could also set it as an anonymous function (something for later).

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[theniteowl]

I do not know how you could do it when building the row using insertRow unless there is some ability to set a textNode for the <TD> tag when using insertRow.

Another approach would be to build the row manually using createElement("TR")
createElement("TD")
and see if you can add the onmouseover event as either a property of TD or using appendChild.

Sorry if I am vague, I have never tried to do quite what you are asking.
The other problem you face is that I do not believe you can set the onmouseover event at the TR level, only within the TD, or inside a SPAN tag inside the TD. Which means your event will only apply to the one table cell, not the entire row.

A way around that problem would be to create the row but insert a table inside the TD tag.
<table>
<tr>
<td>
<table onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"><tr><td>Cell1</td><td>Cell2</td><td>Cell3</td><td>Cell4</td></tr></table>
</td>
</tr>
</table>

This way each row of the outer table actually contains a table consisting of one row with 4 cells. The mouse events apply to the entire inner table but effectively one row of the outer table is highlighting.

You could still use your code above to create the table row but you would only need to insert a single cell then set the value of that cell to contain a string building the inner table with the values.


Paranoid? ME?? WHO WANTS TO KNOW????

 

[BillyRayPreachersSon]

Stewart,

Given your code, this might work:

a.onmouseover = function() {
   this.style.backgroundColor = '#CC0000';
};

a.onmouseout = function() {
   this.style.backgroundColor = '#FFFFFF';
};

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[stewartwebb]

BillyRayPreachersSon , you are a genius. Thanks.