I am dynamically adding new rows to a table and on each new row I am
creating an onmouseover and onmouseout event handler to the entire
row. In Mozilla I have no problem with applying these however with IE,
if I add anything but a textnode to the TD element the onmouseover/out
events do not work for the row. How can I get the entire row to be
highlighted onmouseout or onmouseover with the following code:
<SCRIPT LANGUAGE="JavaScript">
function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
row.attachEvent("onmouseover",function()
{event.srcElement.parentNode.style.backgroundColor='#cdcdcd'});
row.attachEvent("onmouseout",function()
{event.srcElement.parentNode.style.backgroundColor='#FFFFFF'});
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("column 1"))
//When I add the image, it will no longer highlight the whole row??
var newimg=document.createElement("img")
newimg.setAttribute("src","MyImag.jpg");
td1.appendChild(newimg);
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("column 2"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
</script>
</HEAD>
<BODY>
<a href="javascript:addRow('TableVal')">Add new row</a>
<table id="TableVal" cellspacing="0" border="1">
<tbody>
<tr>
<td>row1_column1</td><td>row1_column1</td>
</tr>
</tbody>
</table>
Thank you in advance for any information that you can provide.
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
