title: Adding event handlers to each table row that will affect only that table row?
body: <p>This isn't actually something I'm currently attempting to do; it just occurred to me while working with another table that I have no idea how I'd go about doing it, and the entire time on the train ride home I was puzzling over different solutions, none of which I could imagine working.</p>
  
  <p>Imagine this situation: there is a table of 50 rows. On each row is a button. When clicked, this button should do something to the row it's on -- say, make all its text strikethrough, or make an AJAX call with the first cell's value, or something. </p>
  
  <p>How would you go about binding those event handlers? </p>
  
  <p>My initial thought was something like</p>
  
  <pre><code>buttons = document.getElementsByTagName("input");
  rows = document.getElementsByTagName("tr");
  for (i=0;i&lt;buttons.length;i++) {
      buttons[i].addEventListener('click',function() {
          makeAjaxCall(rows[i]);
      }); 
  };
  </code></pre>
  
  <p>That is,</p>
  
  <ol>
  <li>For each button in the document,</li>
  <li>Add an event handler to that button,</li>
  <li>Which will makeAjaxCall with the data of the row whose number corresponds to the button.</li>
  </ol>
  
  <p>The problem, of course, being that <code>makeAjaxCall</code> will check the value of <code>i</code> <em>when it's invoked</em>, by which time, <code>i</code> is equal to <code>buttons.length</code>, and so the function will only ever work on the final row of the table.</p>
  
  <p>So I suppose you'd need to find some way to actually hard-code the current value of <code>i</code> within the function handler... and that's something I don't even think is possible. Is it? How would you actually do something like this?</p>