Javascript and Dynamic Table

Shane · May 27, 2009

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.

Richard Cornford · May 27, 2009

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.

Shane · May 27, 2009

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

Click to expand...

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:

Click to expand...

<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'});

Click to expand...

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

Only one table shows up with the information	2	Mar 29, 2023
Create dynamic rows	7	Jul 9, 2003
How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Adding rows to table inside a form for input	7	Oct 2, 2009
How can I create a table using the input element?	1	Mar 25, 2022
Dynamic Table	1	Jan 25, 2007
DOM javascript working fine with IE but nothing happens with Firefox	6	May 17, 2007
DOM dynamically built table and addEventListener....	29	Jun 2, 2008

Javascript and Dynamic Table

Shane

Richard Cornford

Shane

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads