asked on

Add events at run time

In my code, I have a

trow = document.createElement ("tr");
trow = orderdetails.insertRow();

Is there a way I could create an event (say Click) to this element? Something like

onclick = "alert('row clicked');" ??

Thanks!

Nushi

trow = document.createElement ("TR"); //must be CAPITAL
trow = orderdetails.insertRow();

svid

ASKER

Thanks Nushi - that isn't the problem. (BTW lowercase tr works fine too). The tr element is being created correctly.

What I need is to add an event to this element.

Nushi

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

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<script>
function addRow(){
      var table = document.getElementById('table1');
      var TR = table1.insertRow();
      var TD = TR.insertCell().innerHTML = 'Row added';

      }
</script>

<table id='table1'>

</table>
<br>
<input type='button' value='Add Row' onclick='addRow()'>
</body>
</html>

Nushi.

svid

ASKER

May be I am not being specific - All elements are being created correctly.

What I want is the created tr element to have an onclick (or any other) event.

Thanks!

ASKER CERTIFIED SOLUTION

Nushi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

svid

ASKER

Thanks Nushi. The points are yours.

TD.onclick= function(){ alert( 'This is onclick') }; is exactly what I was looking for.

svid

ASKER

Nushi - Another question. When are the parameters resolved? For example in the code below:

for(i = 1; i <= objLst.length -1; i++)
{
if (j == 1)
{
trow = document.createElement ("tr");
trow = orderdetails.insertRow();
curroid = objLst.item(i).text;
alert(curroid) ; //-----> this shows the correct id
trow.onclick= function(){ showProducts(curroid); };
}
.....
.....

But when I have an alert within showProducts, the input argument is always the last of curroids.

For example if I have three rows with ids 1, 2, 3 - no matter from where I call showProducts, the input is always 3.

Thanks!

ZeroPage

Hello svid,

put the var declaration for curroid Outside of the function definition and assign the latest value in the function.
The onclick event is outside of the scope where the curroid is defined if curroid is not global.

Like this:

var curroid;
function xyz(){
//...
for(i = 1; i <= objLst.length -1; i++){
if (j == 1){
trow = document.createElement ("tr");
trow = orderdetails.insertRow();
curroid = objLst.item(i).text;
alert(curroid) ; //-----> this shows the correct id
trow.onclick= function(){ showProducts(curroid); };
}
}

Good luck,
ZeroPage

ZeroPage

Sorry, wrong.

var curroid;
function xyz(){
//...
for(i = 1; i <= objLst.length -1; i++){
if (j == 1){
trow = document.createElement ("tr");
trow = orderdetails.insertRow();
curroid = objLst.item(i).text;
alert(curroid) ; //-----> this shows the correct id
trow.onclick= function(){ showProducts(); };
}
}

function showProducts(){
alert(curroid);
}

svid

ASKER

By making it global, wont it always be the latest value?

for example, I have 3 rows

1 - on click of this row I want showProducts(1)
2 - on click of this row I want showProducts(2)
3 - on click of this row I want showProducts(3)

By making it global, after row 3 is created, curroid would be 3

so ShowProducts will always execute with 3, no matter which row is selected.

What I would like is the foll, but with everything created at runtime

<table>
<tr onclick= "showProducts(1)">....</tr>
<tr onclick= "showProducts(2)">....</tr>
<tr onclick= "showProducts(3)">....</tr>
</table>

Thanks for your help.

ZeroPage

Ok, then change it to this:

function xyz(){
//...
for(i = 1; i <= objLst.length -1; i++){
if (j == 1){
trow = document.createElement ("tr");
trow = orderdetails.insertRow();
curroid = objLst.item(i).text;
alert(curroid) ; //-----> this shows the correct id
trow.onclick= new Function("showProducts("+curroid+");");
}
}

svid

ASKER

Thanks ZeroPage. The syntax you sent me gave an error, but the idea was great.

I got the page the page working using:

var f = "trow.onclick = function() {showProducts(" + curroid + "); };"
eval(f);

if only i could give you points......
Thanks a lot!

ZeroPage

Not a problem, I got enough points lately :)

Cheers,
ZeroPage

Nushi

svid

>>if only i could give you points......
you can open q question with the title:
points for ZERo for helpin me out in: Q_20843825.html
and give him 30 points as you did in this question.

Nushi.

ZeroPage

Please svid, do me a favor and do not follow my budies recomandation.

(give him some extra thirty points :)