title: Javascript Onclick with Table Rows
body: <p>I am having problems with my JScript code.  I am trying to loop through all of the rows in a table and add an <code>onclick</code> event.  I can get the <code>onclick</code> event to add but have a couple of problems.</p>
  <p>The first problem is that all rows end up getting set up with the wrong parameter for the <code>onclick</code> event.</p>
  <p>The second problem is that it only works in IE.</p>
  <p>Here is the code excerpt:</p>
  <pre><code>shanesObj.addTableEvents = function(){
  table = document.getElementById(&quot;trackerTable&quot;);
  for(i=1; i&lt;table.getElementsByTagName(&quot;tr&quot;).length; i++){
      row = table.getElementsByTagName(&quot;tr&quot;)[i];
      orderID = row.getAttributeNode(&quot;id&quot;).value;
      alert(&quot;before onclick: &quot; + orderID);
      row.onclick=function(){shanesObj.tableRowEvent(orderID);};
  }}
  
  shanesObj.tableRowEvent = function(orderID){
  alert(orderID);}
  </code></pre>
  <p>The table is located at the following location...</p>
  <p><a href="http://www.blackcanyonsoftware.com/OrderTracker/testAJAX.html" rel="nofollow noreferrer">http://www.blackcanyonsoftware.com/OrderTracker/testAJAX.html</a></p>
  <p>The id's of each row in sequence are...  95, 96, 94...</p>
  <p>For some reason, when <code>shanesObj.tableRowEvent</code> is called, the <code>onclick</code> is set up for all rows with the last value id that went through iteration on the loop (94).</p>
  <p>I added some alerts to the page to illustrate the problem.</p>