title: How to change the innerhtml of <td> inside a <tr> using a loop in javascript?
body: <p>I have a table with this row: (I have six of this in my table)</p>
  
  <pre><code>&lt;tr bgcolor="#FFFFFF" id="0"&gt;
      &lt;td style="height:20px;" align="left"&gt;&lt;/td&gt;
      &lt;td style="height:20px;" align="left"&gt;&lt;/td&gt;
      &lt;td style="height:20px;" align="left"&gt;&lt;/td&gt;
      &lt;td style="height:20px;" align="left"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I want to make a loop that will add innerHTML for each td base on the size of the list. So if there are only two box inside the list, only 2 tr will have inner HTML.</p>
  
  <pre><code>var y = 0;
  &lt;%
  ArrayList userBoxList = BoxList.getInstance().getUserBoxList();
  for(int x=0; x &lt; userBoxList.size(); x++)
  {
      UserBox box = (UserBox) userBoxList.get(x); %&gt;  
      document.getElementById(x).onclick = changeColor;
      document.getElementById(y).innerHTML = "&lt;%=box.getInfo().getBoxNumber()%&gt;";
      document.getElementById(y).innerHTML = "&lt;%=box.getInfo().getBoxName()%&gt;";
      document.getElementById(y).innerHTML = "&lt;%=box.getInfo().getBoxOwner()%&gt;";
      document.getElementById(y).innerHTML = "&lt;%=box.getInfo().getBoxSize()%&gt;";
      y++;
  
  &lt;%}%&gt;
  </code></pre>