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.createElement("TR");
myTR.id="action";
myTR.title="click to do something";
myTR.onclick="alert('mike');";
myTD=document.createElement("TD");
myText=document.createTextNode("a");
myTD.appendChild(myText);
myTD=document.createElement("TD");
myText=document.createTextNode("b");
myTD.appendChild(myText);
myTR.appendChild(myTD);
myTABLE.appendChild(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]

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').onclick)
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.createElement("TR");
myTR.id="action";
myTR.title="click 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');
};

 

[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('action',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('action',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('action',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('action',myi,'');
}

Anyone have anything else?

Mike

 

[Martin Honnen]

Michael Hill wrote:

I need a real
function like:

myTR.onclick = function (evt) { action_item('action',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('action',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('action', 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('action', " + i + ");"
);
but in most cases people are doing that they simply miss on passing the
proper object.