Javascript and Dynamic Table

S

Shane

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.
 
R

Richard Cornford

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

But not with the code you are showing here, as the code here will
error-out on Mozilla browsers.
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'});
<snip> ^^^^^^^^^^^^^^^^^^^^^

Whenever the - srcElement - is an element contained in a TD its -
parentNode - will not be a TR (for the direct children of the TD it
will be the TD). The simplest solution would be to forget about -
attachEvent - and just assign the function to the - onmouseover -
intrinsic event. Then you can use the - this - keyword in that
function to refer to the TR element regardless of how far down the
branches under the TR the element that triggers the event is. I.E.:-

row.onmouseover = function(){
this.style.backgroundColor='#cdcdcd';
};

- though there is no need for a new/different function to be used for
each new row.

Richard.
 
S

Shane

This did the trick.. Thank you!!

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

But not with the code you are showing here, as the code here will
error-out on Mozilla browsers.
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'});

<snip>   ^^^^^^^^^^^^^^^^^^^^^

Whenever the - srcElement - is an element contained in a TD its -
parentNode - will not be a TR (for the direct children of the TD it
will be the TD). The simplest solution would be to forget about -
attachEvent - and just assign the function to the - onmouseover -
intrinsic event. Then you can use the - this - keyword in that
function to refer to the TR element regardless of how far down the
branches under the TR the element that triggers the event is. I.E.:-

row.onmouseover = function(){
    this.style.backgroundColor='#cdcdcd';

};

- though there is no need for a new/different function to be used for
each new row.

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,781
Messages
2,569,615
Members
45,297
Latest member
EngineerD

Latest Threads

Top