Question

我有一个“产品”和“商店”类。类产品具有属性名称，数量和价格。

class Product{
    constructor(name, count, price){
        this.name = name;
        this.count = count;
        this.price = price;
    }
}

class Shop{
    constructor(){
        this.arrProducts = [];
    }

    addProduct (Product) {
        let addName =  Product.name;
        let addPrice = Product.price;
        let addCount = Product.count;
        let newProduct = {name: addName, price: addPrice, count: addCount};

        return this.arrProducts.push(newProduct);
    };

}

我创建对象商店并添加产品

let shop = new Shop();

shop.addProduct(new Product("product1", 10, 200));
shop.addProduct(new Product("product2", 1, 500));
shop.addProduct(new Product("product3", 1, 1000));

此后，我需要在表中显示所有产品。我正在尝试这样做

let myTable= "<table><tr><td style='width: 100px; color: red;'>Product Name</td>";
myTable+= "<td style='width: 100px; color: red; text-align: right;'>Price</td>";
myTable+="<td style='width: 100px; color: red; text-align: right;'>Count</td></tr>";

myTable+="<tr><td style='width: 100px;                   '>---------------</td>";
myTable+="<td     style='width: 100px; text-align: right;'>---------------</td>";
myTable+="<td     style='width: 100px; text-align: right;'>---------------</td></tr>";

for (let item in shop) {
    myTable+="<tr><td style='width: 100px;'>" + shop[item].name + "</td>";
    myTable+="<td style='width: 100px; text-align: right;'>" + shop[item].price + "</td>";
    myTable+="<td style='width: 100px; text-align: right;'>" + shop[item].count + "</td></tr>";
}
myTable+="</table>";
document.write( myTable);

但是我不确定。

Answer 1

您可以直接使用一系列产品，而无需使用新对象获取产品信息。

我建议将表格的单个产品和整个表格的信息分开。

如果行需要某种样式，则可以将某些CSS类添加到行或表头。

class Product {
    constructor(name, count, price) {
        this.name = name;
        this.count = count;
        this.price = price;
    }
    getRow(cols) {
        var tr = document.createElement('tr');
        cols.forEach(key => {
            var td = document.createElement('td');
            td.classList.add(key);
            td.appendChild(document.createTextNode(this[key]));
            tr.appendChild(td);
        });
        return tr;
    }
}

class Shop {
    constructor() {
        this.products = [];
    }
    addProduct(product) {
        this.products.push(product);
    }
    getTable() {
        var table = document.createElement('table'),
            tr = document.createElement('tr');
        
        [['name', 'Product Name'], ['price', 'Price'], ['count', 'Count']].forEach(([key, text]) => {
            var th = document.createElement('th');
            th.classList.add(key);
            th.appendChild(document.createTextNode(text));
            tr.appendChild(th);
        });
        table.appendChild(tr);
        this.products.forEach(p => table.appendChild(p.getRow(['name', 'price', 'count'])));
        return table;
    }
}

let shop = new Shop();

shop.addProduct(new Product("product1", 10, 200));
shop.addProduct(new Product("product2", 1, 500));
shop.addProduct(new Product("product3", 1, 1000));

document.body.appendChild(shop.getTable());

td.name { width: 100px; }
td.count { width: 100px; text-align: right; }
td.price { width: 100px; text-align: right; }
th.name { width: 100px; color: red; }
th.count { width: 100px; color: red; text-align: right; }
th.price { width: 100px; color: red; text-align: right; }

Answer 2

在Shop中添加一个返回产品列表的方法，该类本身无法迭代。

class Shop {
    getProducts() { return this.arrProducts; };
}

...
for (let item in shop.getProducts()) {
    // use item.name
    // item.price
    // item.count
}

如何循环浏览复杂对象的元素并将其显示在表格中

2 个答案: