title: Javascript - click event on table rows to change HTML elements
body: <p>I'm still new to JavaScript, so apologies if any of this is unclear:</p>
  
  <p>I have dynamically created a table in JS and added a click handler to each row, which is working fine. But I want that click to change some elements in a separate container I have got in the HTML - i.e. if you click on the 1st row of the table, then that will change the text to show more details about what is in that row. </p>
  
  <p>Where I'm struggling is how to get it so that that clicking on each row will change it to the details for that row (i.e. click on row 2 and it changes to the details for row 2, click on row 5 and it changes to the details for row 5 etc.).</p>
  
  <p>I have a function set up - loadDetails(num), where the parameter num should be the number of the row (e.g. if I call loadDetails(0) it will return the details for the 1st row). So basically I want to create something so that for each row it will call this function with the correct number as the parameter. Any help would be greatly appreciated?</p>
  
  <pre><code>function myFunction() {
  
      var rows = document.getElementsByTagName("tr");
  
      for (var i = 0; i &lt; rows.length; i++){
      //code in here?
      //then call the loadDetails() function?  
      }
  
      //or call the loadDetails() function here?  
  
  }
  </code></pre>
  
  <p>Edit: here is the code for creating the table - it is basically creating a table with three columns and getting its data from a JSON array (tableOne). So the third line is where I'm struggling - I'm not sure how to assign the id for the tr so that it is unique each time it loops through?</p>
  
  <pre><code>for (var i = 0; i &lt; tableOne.length; i++) { 
      var row1 = document.createElement("tr");
      row1.id = "row" + i;
      row1.addEventListener("click", loadSelected, false);
      var cell1 = document.createElement("td");
      cell1.innerHTML = tableOne[i].firstName;
      var cell2 = document.createElement("td");
      cell2.innerHTML = tableOne[i].lastName;
      var cell3 = document.createElement("td");
      cell3.innerHTML = tableOne[i].age;
  
      row1.appendChild(cell1);
      row1.appendChild(cell2);
      row1.appendChild(cell3);
  
      tbody.appendChild(row1);
      table.appendChild(row1);
  }
  </code></pre>