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]

Re: Adding onclick to TR element dynamically



Michael Hill wrote:
[color=blue]
> I had this html:
>
> <tr id="action" title="click to do something" onclick="alert( 'mike');">
> <td>a</td>
> <td>b</td>
> </tr>[/color]

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.
[color=blue]
> 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";[/color]

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]

Re: Adding onclick to TR element dynamically

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

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]

Re: Adding onclick to TR element dynamically

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

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]

Re: Adding onclick to TR element dynamically



Michael Hill wrote:

[color=blue]
> 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".[/color]

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/