title: Convert a Multi-Dimensional Array to HTML Table
body: <p>Playing with a quick concept. Hopefully the answer is pretty simple, my attempt is just failing here for some reason.</p>
  
  <p>Let's say I have an array such as:</p>
  
  <p><code>var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];</code></p>
  
  <p>And I'm trying to flip the data around, so it converts it into:</p>
  
  <p><code>var items_converted = [[1,4,7,10],[2,5,8,11],[3,6,9,12]];</code></p>
  
  <p>This much is completed. Now, with my new multidimensional array, I want to push each internal array's contents to an HTML table row:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;4&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;...
  </code></pre>
  
  <h3>Play here: <a href="http://jsfiddle.net/XDFd2/" rel="nofollow">http://jsfiddle.net/XDFd2/</a></h3>
  
  <p>I tried doing it with two <code>for-loops</code>, but it doesn't seem to be appending the <code>&lt;tr&gt;</code> or <code>&lt;/tr&gt;</code>.</p>
  
  <pre><code>var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
  var items_converted = [[1,4,7,10],[2,5,8,11],[3,6,9,12]];
  var table = $('#table');
  
  for(var i=0; i&lt;items_converted.length; i++){
          if(i==0){
              table.append('&lt;tr&gt;');
          }
      for(var j=0; j&lt;items_converted[i].length; j++){
          table.append('&lt;td&gt;'+items_converted[i][j]+'&lt;/td&gt;');
          if(j===items_converted[0].length-1){
              table.append('&lt;/tr');
          }
      }
  }
  </code></pre>
  
  <p>I feel I'm missing something very simple here... perhaps the order that the loops are processing?</p>
  
  <p>Any help is appreciated.</p>
  
  <h3>Play here: <a href="http://jsfiddle.net/XDFd2/" rel="nofollow">http://jsfiddle.net/XDFd2/</a></h3>