使用Javascript：创建一个基于对象的数组竖列的表 [英] Javascript: Create vertical column table based on Array of Objects

问题描述

所以可以说我有产品对象的JavaScript数组

So lets say I have a Javascript Array of Product Objects

function Product() {
    this.Name = "";
    this.Cost = "";
    this.Color = "";
}

var ProductsArray = [];

var product1 = new Product();
product1.Name = "Name1";
product1.Cost = "Cost1";
product1.Color = "Color1";

var product2 = new Product();
product2.Name = "Name2";
product2.Cost = "Cost2";
product2.Color = "Color2";

var product3 = new Product();
product3.Name = "Name3";
product3.Cost = "Cost3";
product3.Color = "Color3";

ProductsArray.push(product1);
ProductsArray.push(product2);
ProductsArray.push(product3);

ProductsArray现在有以下

ProductsArray now has the following

product1: [Name1, Cost1, Color1],
product2: [Name2, Cost2, Color2],
product3: [Name3, Cost3, Color3]

我如何通过这个数组对象所以taht我能够通过动态jQuery的创建表的环路的格式如下：

How do I loop through this Array of Objects so taht I'm able to create table dynamically through jQuery which as the following format:

这有点像一个表，其列是水平

It's sort of like a table whose columns are horizontal

+-----------------------------------+
| Names  | Name 1 | Name 2 | Name 3 |
+-----------------------------------+
| Costs  | Cost 1 | Cost 2 | Cost 3 |
+-----------------------------------+
| Colors | Color1 | Color2 | Color3 |
+-----------------------------------+

<table>

    <tr>
        <th>Names</th>
        <td>Name1</>
        <td>Name2</>
        <td>Name3</>
    </tr>

    <tr>
        <th>Costs</th>
        <td>Cost1</>
        <td>Cost2</>
        <td>Cost3</>
    </tr>

    <tr>
        <th>Colors</th>
        <td>Color1</>
        <td>Color2</>
        <td>Color3</>
    </tr>

<table>

我想我遇到的问题是因为通过以这种方式阵列I循环：

I guess the problem I'm having is since I loop through the Array in this fashion:

for (var i = 0; i < ProductsArray.length; i++) {

    ProductsArray[i].Name
    ProductsArray[i].Cost
    ProductsArray[i].Color

}

我只能通过一个对象的时间，所以我需要一种方法来通过每个部分每个迭代的值，例如我需要去通过每个名称的值，并把它们放在 ＆LT; TD＆GT; 列，然后通过每个成本的值，并把它们放在一个＆LT; TD＆GT; 等...

I can only go through one object at time so I need a way to go through the values of each section each iteration, for example I need to go through the values of each Name and put them in <td> columns, then go through the values of each Cost and put them in a <td> etc...

推荐答案

我建议稍微不同的方法。首先，我想传递参数的构造函数，那么我会创造的产品阵列实例和功能，使HTML为您的表。

I would suggest a slightly different approach. First I'd pass the arguments in the constructor, then I'd create the products array with instances and a function to make the HTML for your table.

您可以用任何集合，不仅实例，但有规则物体以这个为好，只是传递对象的数组，属性显现，以及头为每个属性。

You can use this with any collection, not only instances, but regular objects as well, just pass an array of objects, the properties to show, and the headers for each of those properties.

演示： http://jsbin.com/gibez/1

function Product(name, cost, color) {
  this.name = name;
  this.cost = cost;
  this.color = color;
}

var products = [
  new Product('name1', 'cost1', 'color1'),
  new Product('name2', 'cost2', 'color2'),
  new Product('name3', 'cost3', 'color3')
];

function pluck(prop) {
  return function(x) {
    return x[prop];
  };
}

function table(data, props, headers) {
  var cells = props.map(function(prop) {
    return '<td>'+ data.map(pluck(prop)).join('</td><td>') +'</td>';
  });
  var rows = headers.map(function(head, i) {
    return '<tr><th>'+ head +'</th>'+ cells[i] +'<tr>';
  });
  return '<table>'+ rows.join('') +'</table>';
}

var tableHtml = table(
  products,
  ['name', 'cost', 'color'],
  ['Names', 'Costs', 'Colors']
);

这篇关于使用Javascript：创建一个基于对象的数组竖列的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！