DOM javascript - Imbed javascript in dynamically added Row

Ravi Singh (UCSD) · May 24, 2005

Hello all

Attached is a simple HTML file that adds and delete rows. In the add
row function I set an attribute "onClick" this triggers the
testMessage() function. When I try this in Firefox it works just fine
however on IE it just refuses to work.

What is interseting is the ROW that already exists has a similar
'onClick' event which works when the page is loaded, but subsequent
"row" additions to the table to not work in IE.

Much thanks for any helfull insights that you can give.

-Ravi Singh.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Testing DOM insertions</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT type=text/javascript>
var info = new Array("TD 1: index 0", "TD 2: index 1", "TD 3: index
2");
function insertTR(){
var newTR = document.createElement("tr");
newTR.setAttribute('onclick', "testMessage(this)");
for (i=0;i<info.length; i++)
{
var newTD= document.createElement("TD");
var newText = document.createTextNode(info);
newTD.appendChild(newText)
newTR.appendChild(newTD);

}
var tbElm =
document.getElementById("table1").getElementsByTagName("TBODY")[0];
tbElm.appendChild(newTR);
// }

}

function deleteTR()
{
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
if (lastRow > 0)
tbl.deleteRow(lastRow - 1);
else
alert("No more rows left to delete!");
}

function testMessage(oRow) {

alert(oRow);

}
</SCRIPT>

<META content="MSHTML 6.00.2900.2627" name=GENERATOR></HEAD>
<BODY>

<TABLE id=table1 border=1><TBODY>

<TR onClick="testMessage(this)"><TD>TD 1: index 0</TD>
<TD>TD 2: index 1</TD>
<TD>TD 3: index 2</TD></TR>

</TBODY></TABLE>
<P><INPUT onclick=insertTR(); type=button value="Insert Row">
<INPUT onclick=deleteTR(); type=button value="Delete Row"></P>

</BODY></HTML>

Ravi Singh (UCSD) · May 24, 2005

Arrgh!! I got it

use newTR.onclick = function(){testMessage(this);};

instead of
newTR.setAttribute('onclick', "testMessage(this)");

now my question is "is setAttribute" a non preferred way of doing
things?

why?? does it work in firefox and not in IE

Thanks

Ravi Singh.

BootNic · May 24, 2005

Ravi Singh (UCSD) said:
var tbElm =
document.getElementById("table1").getElementsByTagName("TBODY")[0];
tbElm.appendChild(newTR);

var tbElm =
document.getElementById("table1").getElementsByTagName("TBODY")[0];
tbElm.appendChild(newTR);
document.body.innerHTML = document.body.innerHTML

--
BootNic Tuesday, May 24, 2005 4:02 PM

All my humor is based upon destruction and despair. If the whole world was tranquil, without disease
and violence, I'd be standing on the breadline right in back of J. Edgar Hoover.
*Lenny Bruce US comedian, satirist, author*

RobG · May 25, 2005

Ravi said:
Arrgh!! I got it

Please don't top-post and trim quotes to the relevant bits.

use newTR.onclick = function(){testMessage(this);};

instead of
newTR.setAttribute('onclick', "testMessage(this)");

now my question is "is setAttribute" a non preferred way of doing
things?

why?? does it work in firefox and not in IE

Have a read of this thread:

<URL:http://groups-beta.google.com/group...tribute+table+function&hl=en#9e08810b14370755>

Richard Cornford · May 25, 2005

BootNic said:
Ravi Singh (UCSD) wrote:
var tbElm =
document.getElementById("table1").getElementsByTagName(
"TBODY")[0];
tbElm.appendChild(newTR);

Click to expand...

var tbElm =
document.getElementById("table1").getElementsByTagName(
"TBODY")[0];
tbElm.appendChild(newTR);
document.body.innerHTML = document.body.innerHTML

You are proposing re-building almost the entire DOM each and every time
an element is added, as an alternative to replacing;-

newTR.setAttribute('onclick', "testMessage(this)");

- with:-

newTR.onclick = function(){testMessage(this);};

-?

Richard.

Ravi Singh (UCSD) · May 26, 2005

Richard,

With this call newTR.onclick = function(){testMessage(this);}; --
you build the entire DOM tree. But IE does not support setAttribute for
imbedding javascript functionality?

Thanks
-Ravi.

Ravi Singh (UCSD) · May 26, 2005

thanks for the pointer Rob, very helpful.

Richard Cornford · May 26, 2005

Ravi said:
With this call newTR.onclick = function(){testMessage(this);};
-- you build the entire DOM tree.

What are you talking about?

But IE does not support setAttribute
for imbedding javascript functionality?

The W3C setAttribute method adds an Attribute Node to an Element Node,
even on IE. Side-effects depend on the implementation (and which type of
DOM is being scripted).

Richard.

Random · May 26, 2005

BootNic said:
var tbElm =
document.getElementById("table1").getElementsByTagName("TBODY")[0];
tbElm.appendChild(newTR);

Click to expand...

var tbElm =
document.getElementById("table1").getElementsByTagName("TBODY")[0];
tbElm.appendChild(newTR);
document.body.innerHTML = document.body.innerHTML

....

Why do the innerHTML = innerHTML? I've never seen that done before and
I'm curious as to what purpose it serves. Compatibility?

Richard Cornford · May 26, 2005

Random said:
BootNic wrote:

var tbElm =
document.getElementById("table1").getElementsByTagName(
"TBODY")[0]; tbElm.appendChild(newTR);
document.body.innerHTML = document.body.innerHTML

Click to expand...

Why do the innerHTML = innerHTML? I've never seen that done
before and I'm curious as to what purpose it serves.

IE only internally generates event handling functions from HTML
attributes when it is parsing HTML source code, so this 'trick' is to
serialise the DOM into HTML source code and then use that to replace the
existing DOM (or at least a big chink of it). The innerHTML property
parses its string 'argument' (argument to the internal 'setter') as HTML
and builds a DOM branch with it in the way IE does for external HTML, so
the internal intrinsic event handlers are created for attribute,
including those added with setAttribute (as they will be apparent in the
HTML resulting from serialising the DOM).

Compatibility?

Voodoo; it is one of those things that broadly works, in the same way
that most - eval - abuses broadly work, and is propagated for that
reason alone.

However, using this technique allows people to remain ignorant of the
numerous better alternatives offered in the DOM (including very
cross-browser approaches such as assigning a function reference to event
handling properties of element objects), which are more efficient
approaches by orders of magnitude as serialising and then re-parsing the
DOM in order to get back to where you started (mostly, as all
script-assigned handlers and expandos are potentially lost in the
process) is ridiculously over-the-top.

Richard.

Javascript DOM	1	Mar 29, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Sort by number of characters	1	Nov 2, 2023
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?	4	Sep 29, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Checking dynamically populated data using ajax with user entered value	5	Apr 11, 2020
Only one table shows up with the information	2	Mar 29, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023

DOM javascript - Imbed javascript in dynamically added Row

Ravi Singh (UCSD)

Ravi Singh (UCSD)

BootNic

RobG

Richard Cornford

Ravi Singh (UCSD)

Ravi Singh (UCSD)

Richard Cornford

Random

Richard Cornford

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads