Adding onclick to TR element dynamically

[Michael Hill]

I had this html:

<tr id="action" title="click to do something" onclick="alert( 'mike');">
<td>a</td>
<td>b</td>
</tr>

and it works when I click on the row, but when I try to add it
dynamically like:

myTR=document.c reateElement("T R");
myTR.id="action ";
myTR.title="cli ck to do something";
myTR.onclick="a lert('mike');";
myTD=document.c reateElement("T D");
myText=document .createTextNode ("a");
myTD.appendChil d(myText);
myTD=document.c reateElement("T D");
myText=document .createTextNode ("b");
myTD.appendChil d(myText);
myTR.appendChil d(myTD);
myTABLE.appendC hild(myTR);

Nothing is happening when I click on the row. I know some of the
attribute are case sensitive. I tried onclick, onClick, OnClick, none of
them work.

Anyone know what's up?

Mike

[Martin Honnen]

Michael Hill wrote:

I had this html:

<tr id="action" title="click to do something" onclick="alert( 'mike');">
<td>a</td>
<td>b</td>
</tr>
Trying
alert(document. getElementById( 'action').oncli ck)
might give you a clue about what is going on in the JavaScript object
model created from that markup above, see below for an explanation.
and it works when I click on the row, but when I try to add it
dynamically like:

myTR=document.c reateElement("T R");
myTR.id="action ";
myTR.title="cli ck to do something";

With client side JavaScript an event handler is a function object so you
need to assign one,
myTR.onclick = function (evt) {
alert('mike');
};
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Michael Hill]

>

With client side JavaScript an event handler is a function object so you
need to assign one,
myTR.onclick = function (evt) {
alert('mike');
};

Martin, thanks good stuff execpt instead of "alert('mike'); " I need a real
function like:

myTR.onclick = function (evt) { action_item('ac tion',i); }

The bad news is that in that function the variable 'i', need to be a number.

I have 22 rows that are being produced and I need the onlick event to be
specific for that row! So if I have:

for ( var i=1; i<23; i++ )
{
<snip>
myTR.onclick = function (evt) { action_item('ac tion',i); }
<snip>
}

The resulting html output for each row would look like:

<tr onclick=action_ item('action',' 1')>
<tr onclick=action_ item('action',' 2')>
<tr onclick=action_ item('action',' 3')>
etc.

The value I am getting for each i is "22".

Mike

[Michael Hill]

>

for ( var i=1; i<23; i++ )
{
<snip>
myTR.onclick = function (evt) { action_item('ac tion',i); }
<snip>
}
Mike

This is what I got that works:

myTR.onclick =
function (evt)
{
var tmp=this.id;
var myi=tmp.substr( 6,(tmp.length-6));
action_item('ac tion',myi,'');
}

Anyone have anything else?

Mike

[Martin Honnen]

Michael Hill wrote:

I need a real
function like:

myTR.onclick = function (evt) { action_item('ac tion',i); }

The bad news is that in that function the variable 'i', need to be a number.

I have 22 rows that are being produced and I need the onlick event to be
specific for that row! So if I have:

for ( var i=1; i<23; i++ )
{
<snip>
myTR.onclick = function (evt) { action_item('ac tion',i); }
<snip>
}

The resulting html output for each row would look like:

<tr onclick=action_ item('action',' 1')>
<tr onclick=action_ item('action',' 2')>
<tr onclick=action_ item('action',' 3')>
etc.

The value I am getting for each i is "22".

Why do you need a number if that is an index to the <tr> element? Can't
you simply pass the <tr> element object to the function
myTR.onclick = function (evt) {
action_item('ac tion', this);
}
with
function action_item (actionString, actionElement) {
// do things here with actionElement
}

If you really need to pass the current value of say i when the event
handler is created you would need to use the Function constructor to
construct the source of the function as needed
myTR.onclick =
new Function ("evt",
"action_item('a ction', " + i + ");"
);
but in most cases people are doing that they simply miss on passing the
proper object.
--

Martin Honnen
http://JavaScript.FAQTs.com/