can't attach dynamic id to table row

frontline

09-25-2003, 02:24 PM

Hello
im trying to attach dynamic id attribute but for some reason im getting only the last
id name , if you will run this script you will get on the onclick event alert only the "r3" name
no Metter what row you will click. what i was expecting is to get different id name for every
row ("r0","r1","r2","r3").
----------------------------------------------------------------------------------------------------------------------------------------------------------
<HTML>
<HEAD>
<script>
function userSelect(o){alert(o.id)}
function setTable(){
var oRow,oCellText;
var arrNames = "blah1|blah2|blah3|blah4|";
arrNames = arrNames.split("|");
for(var i=0;i<arrNames.length-1;i++){
oRow = TableFirst.insertRow();
oRow.id = "r"+i;
oRow.attachEvent("onclick",function(){userSelect(oRow)});
oCellText = oRow.insertCell();
oCellText.innerHTML = arrNames[i];
}
}
</script>
</HEAD>
<BODY>
<input type="button" onclick="setTable();" value="build"><br>

<table id="TableFirst" border="1" cellspacing="0" cellpadding="0" width="100%" class="font"></table>
</BODY>
</HTML>
-----------------------------------------------------------------------------------
thanks

Roy Sinclair

09-25-2003, 03:54 PM

cheesebag

09-25-2003, 06:18 PM

Your problem is...you aren't really 'attach dynamic id attribute' at all; you're assigning a function [i]literal, which generates a function object with exactly the code you type in. No values are 'filled in' when the function is assigned, so any parameters will have to be resolved when the handler runs, which will be in a completely different context. If you want to 'fill in' a value at the time the handler is assigned, you'll need to use the Function constructor (function!), which evaluates the function body as a string:

<HTML>
<HEAD>
<script>
function setTable(){
var oRow,oCellText;
var arrNames = "blah1|blah2|blah3|blah4|";
arrNames = arrNames.split("|");
for(var i=0;i<arrNames.length-1;i++){
oRow = TableFirst.insertRow();
oRow.id = "r"+i;
oRow.attachEvent("onclick", new Function('alert("' + oRow.id + '")') );
oCellText = oRow.insertCell();
oCellText.innerHTML = arrNames[i];
}
}
</script>
</HEAD>
<BODY>
<input type="button" onclick="setTable();" value="build"><br>

<table id="TableFirst" border="1" cellspacing="0" cellpadding="0" width="100%" class="font"></table>
</BODY>
</HTML>

Now I'm baffled...:confused: when you do this:

function(){userSelect(oRow)})

....the handler, when it runs, is long gone from the setTable function which registered it, and should have no idea of what 'oRow' is...and yet it does! It alerts the last value of oRow, which is a....local variable (to setTable). How is that possible? Interesting, though (maybe Internet Explorer exposes local variables as globals, wouldn't surprise me). Anyone....?

frontline

09-29-2003, 07:45 AM

Hello
first of all tnx for the tip , but still .. it dont keep the function handler attached to its object , it seams like the function handler
working in the minute it was created , but then when i try to
"onclick" the object i dont get any attached event fired.
what is wrong here?

frontline

09-29-2003, 08:03 AM

ok ignor my last post every thing is working fine