Javascript table 中的输出对象有助于删除重复代码

Question

我想知道你是否可以帮助我，我已经在下面的 link 中创建了一个 class 和对象，并且我有在 table 中显示它的代码。如果我继续我现在的方式，那将是 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

将库存对象移动到一个数组中，然后循环创建行。

像这样：

    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

参考您的 fiddle，而不是像这样声明对象：

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

然后您将在传递产品数组的脚本中调用它。

Javascript table 中的输出对象有助于删除重复代码

Javascript output objects in table help to remove repeat code

html

javascript