title: Javascript output objects in table help to remove repeat code
body: <p>I was wondering if you could help me, I have created a class and objects in the link below and I have got code that displays it in a table. If I continue the way I am it will be 99 lines of repeated code I was wondering if anyone knew of a way to do it with less code. </p>
  
  <p>Thank you James
  <a href="http://codepen.io/anon/pen/dPOOXM" rel="nofollow">http://codepen.io/anon/pen/dPOOXM</a>
  <a href="http://jsfiddle.net/evt2pex8/" rel="nofollow">http://jsfiddle.net/evt2pex8/</a></p>
  
  <pre><code> function createTable() {
          // Create table.
          var table = document.createElement('table');
          // Apply CSS for table
          table.setAttribute('class', 'article');
          // Insert New Row for table at index '0'.
          var row1 = table.insertRow(0);
          // Insert New Column for Row1 at index '0'.
          var row1col1 = row1.insertCell(0);
          row1col1.innerHTML = hat.product;
          // Insert New Column for Row1 at index '1'.
          var row1col2 = row1.insertCell(1);
          row1col2.innerHTML = hat.description;
          // Insert New Column for Row1 at index '2'.
          var row1col3 = row1.insertCell(2);
          row1col3.innerHTML = hat.stockLevel;
          // Insert New Column for Row1 at index '3'.
          var row1col4 = row1.insertCell(3);
          row1col4.innerHTML = hat.price;
  
  
          var row2 = table.insertRow(0);
          // Insert New Column for Row2 at index '0'.
          var row2col1 = row2.insertCell(0);
          row2col1.innerHTML = beltsF.product;
          // Insert New Column for Row2 at index '1'.
          var row2col2 = row2.insertCell(1);
          row2col2.innerHTML = beltsF.description;
          // Insert New Column for Row2 at index '2'.
          var row2col3 = row2.insertCell(2);
          row2col3.innerHTML = beltsF.stockLevel;
          // Insert New Column for Row2 at index '3'.
          var row2col4 = row2.insertCell(3);
          row2col4.innerHTML = beltsF.price;
  
          var row3 = table.insertRow(0);
          // Insert New Column for Row3 at index '0'.
          var row3col1 = row3.insertCell(0);
          row3col1.innerHTML = trousers.product;
          // Insert New Column for Row3 at index '1'.
          var row3col2 = row3.insertCell(1);
          row3col2.innerHTML = trousers.description;
          // Insert New Column for Row3 at index '2'.
          var row3col3 = row3.insertCell(2);
          row3col3.innerHTML = trousers.stockLevel;
          // Insert New Column for Row3 at index '3'.
          var row3col4 = row3.insertCell(3);
          row3col4.innerHTML = trousers.price;
  
          // Append Table into div.
          var div = document.getElementById('divTable');
          div.appendChild(table);
      }
  </code></pre>