Dynamically adding onmouseover, onmouseout events not working

[Steve Macleod]

Hi,
I was wondering if anyone would be good enough to have a look at the
following code and tell me if there is something im missing!
drug_list is an array of drug details
table is a reference to a correctly structured table.

The problem is that the onmouseover and onmouseout events are only
being added for the last table row:

function drawTableRow(drug_list,table)
{
//id,abreviation,drug_name,instruction,frequency,amount,preperation
var tab_id = table.id;
var t_body = table.getElementsByTagName("tbody")[0];
for (var x=0;x<drug_list.length;x++)
{
new_table_row = document.createElement('tr');
for (var y=0;y<=6;y++)
{
if (y==0)//id as table row id
{
new_table_row.id = tab_id + "_rw_" + drug_list[x][y];
//bind mouseover, out, click events
new_table_row.onmouseover = function() { overTr(new_table_row); }
new_table_row.onmouseout = function() { outTr(new_table_row); }
new_table_row.onmousedown = function() { clickTr(new_table_row); }
alert(new_table_row.id);
t_body.appendChild(new_table_row);
}
else
{
new_td = document.createElement('td');
new_td.innerText = drug_list[x][y];
new_table_row.appendChild(new_td);
}
}
}
table.style.display = "inline";
}

 

[Martin Honnen]

Steve Macleod wrote:

new_table_row = document.createElement('tr');
for (var y=0;y<=6;y++)
{
if (y==0)//id as table row id
{
new_table_row.id = tab_id + "_rw_" + drug_list[x][y];
//bind mouseover, out, click events
new_table_row.onmouseover = function() { overTr(new_table_row); }

Use
new_table_row.onmouseover = function() { overTr(this); }
and the same approach for the other handlers.

 

[Steve Macleod]

cheers!
it worked