表格中的Javascript輸出對象有助於刪除重複代碼

Question

我想知道如果你能幫助我，我已經在下面的鏈接中創建了一個類和對象，並且我得到了將它顯示在表中的代碼。如果我按照我的方式繼續下去，那麼將會有99行重複代碼，我想知道是否有人知道用較少的代碼來實現它的方法。

謝謝詹姆斯 http://codepen.io/anon/pen/dPOOXM http://jsfiddle.net/evt2pex8/

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); 
    } 

Answer 1

通過移動股票對象爲Array和循環他們創造的行。

事情是這樣的：

var stocks = []; 
    stocks.push(new Stock("Bag (F)", "Leather Shoulder Bag", 4, 50.45)); 
    stocks.push(new Stock("Blouse (F)", "Vintage Blue Silk Polka Dot Blouse", 8, 45.99)); 
    stocks.push(new Stock("Boots (F)", "Soft Leather Brown Ankle Boots", 3, 65.35)); 
    stocks.push(new Stock("Belts (F)", "Woven Finish Fashion Belt", 15, 21.99)); 
    stocks.push(new Stock("Shirt (M)", "Jacquard Patter Wrangler Western Shirt", 19, 34.87)); 
    stocks.push(new Stock("Shoes (M)", "Suede Ankle Boots", 6, 55.00)); 
    stocks.push(new Stock("Trousers (M)", "Izod Peach Chinos", 23, 31.75)); 
    stocks.push(new Stock("Belt (M)", "Suede Casual Belt", 4, 22.98)); 
    stocks.push(new Stock("Hat (M)", "Trilby Style Brown Woven Fix", 2, 67.80)); 

    function createTable() { 
     // Create table. 
     var table = document.createElement('table'); 
     // Apply CSS for table 
     table.setAttribute('class', 'article'); 
     for(var i = 0;i<stocks.length;i++){ 
      var row1 = table.insertRow(0); 
      var row1col1 = row1.insertCell(0); 
      var stock = stocks[i] 
      row1col1.innerHTML = stock.product; 
      // Insert New Column for Row1 at index '1'. 
      var row1col2 = row1.insertCell(1); 
      row1col2.innerHTML = stock.description; 
      // Insert New Column for Row1 at index '2'. 
      var row1col3 = row1.insertCell(2); 
      row1col3.innerHTML = stock.stockLevel; 
      // Insert New Column for Row1 at index '3'. 
      var row1col4 = row1.insertCell(3); 
      row1col4.innerHTML = stock.price; 
     } 

     // Append Table into div. 
     var div = document.getElementById('divTable'); 
     div.appendChild(table); 
    } 

Answer 2

參照你的小提琴，而不是申報對象是這樣的：

// Instantiate new objects with 'new' 
var headings = new Stock("Product", "Description", "Stock Level", "Price"); 
var shorts = new Stock("Shorts (F)", "Stone Wash Dmin Shorts ", 20, 25.90); 
var bag = new Stock("Bag (F)", "Leather Shoulder Bag", 4, 50.45); 
var blouse = new Stock("Blouse (F)", "Vintage Blue Silk Polka Dot Blouse", 8, 45.99); 
var boots = new Stock("Boots (F)", "Soft Leather Brown Ankle Boots", 3, 65.35); 
var beltsF = new Stock("Belts (F)", "Woven Finish Fashion Belt", 15, 21.99); 
var shirt = new Stock("Shirt (M)", "Jacquard Patter Wrangler Western Shirt", 19, 34.87); 
var shoes = new Stock("Shoes (M)", "Suede Ankle Boots", 6, 55.00); 
var trousers = new Stock("Trousers (M)", "Izod Peach Chinos", 23, 31.75); 
var beltsM = new Stock("Belt (M)", "Suede Casual Belt", 4, 22.98); 
var hat = new Stock("Hat (M)", "Trilby Style Brown Woven Fix", 2, 67.80); 

做：

// Instantiate new objects with 'new' 
var products = [ ]; 
products.push(new Stock("Product", "Description", "Stock Level", "Price")); 
products.push(new Stock("Shorts (F)", "Stone Wash Dmin Shorts ", 20, 25.90)); 
.... 

所以，你有一個產品陣列。 你的函數將變爲：

function createTable(products) { 
     // Create table. 
     var table = document.createElement('table'); 
     // Apply CSS for table 
     table.setAttribute('class', 'article'); 
     for (var i = 0; i < products.length; i++) { 
      var pr = products[i] 
      var row1 = table.insertRow(i); 
      var row1col1 = row1.insertCell(1); 
      row1col1.innerHTML = pr.product; 
      // Insert New Column for Row1 at index '1'. 
      var row1col2 = row1.insertCell(1); 
      row1col2.innerHTML = pr.description; 
      // Insert New Column for Row1 at index '2'. 
      var row1col3 = row1.insertCell(2); 
      row1col3.innerHTML = pr.stockLevel; 
      // Insert New Column for Row1 at index '3'. 
      var row1col4 = row1.insertCell(3); 
      row1col4.innerHTML = pr.price; 
     } 
     // Append Table into div. 
     var div = document.getElementById('divTable'); 
     div.appendChild(table); 
    } 

你會然後調用它在腳本中傳遞的產品陣列。