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

我想知道你是否可以帮助我，我已经在下面的链接中创建了一个类和对象，并且我已经得到了在表中显示它的代码。如果我继续我现在的方式，它将是99行重复的代码。我想知道是否有人知道用更少的代码来实现它的方法

谢谢你，詹姆斯

---

将库存对象移动到数组中，并循环它们以创建行

大概是这样的：

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

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

---

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

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

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

做：

所以你有一个产品阵列。 然后，您的功能将变为：

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

---

然后，您将通过products数组在脚本中调用它。

您是否尝试过for循环？因为您的问题得到了回答，您接受了答案，所以您应该将原本不属于该问题的任何其他问题移至新问题。在这个问题中，您将询问如何避免重复代码。关于如何添加onclick事件的下一个问题与此问题不同。请记住你的新问题。