Question

我们说我有一个产品对象的Javascript数组

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现在有以下

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

如何遍历此对象数组，以便我能够通过jQuery动态创建表格，其格式如下：

它有点像一个表格，其列是水平的

+-----------------------------------+
| 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>

我想我遇到的问题是因为我以这种方式遍历数组：

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

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

}

我只能经历一个对象，所以我需要一种方法来遍历每个迭代的每个部分的值，例如我需要遍历每个Name的值并将它们放在<td>列中，然后浏览每个成本的值并将它们放在<td>等......

中

Answer 1

您可以提前选择3 tr并在迭代数组时使用它们：

http://jsfiddle.net/QR7UZ/

<table>
    <tr>
        <th>Names</th>
    </tr>
    <tr>
        <th>Costs</th>
    </tr>
    <tr>
        <th>Colors</th>
    </tr>
</table>

var $trs = $('table tr');
var $nameTr = $trs.eq(0);
var $costTr = $trs.eq(1);
var $colorTr = $trs.eq(2);

$.each(ProductsArray, function(idx, item) {
    $('<td />').text(item.Name).appendTo($nameTr);
    $('<td />').text(item.Cost).appendTo($costTr);
    $('<td />').text(item.Color).appendTo($colorTr);
});

Answer 2

我建议采用略有不同的方法。首先我在构造函数中传递参数，然后我创建带有实例的产品数组和一个为您的表创建HTML的函数。

您可以将它用于任何集合，不仅是实例，还可以用于常规对象，只需传递一组对象，要显示的属性以及每个属性的标题。

演示： 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']
);

Answer 3

嗯......你可以添加三个单独的字符串，每个字符串最终构成一个表格行。事先使用已存在的<tr>元素设置骨架表，然后运行脚本以使用<td>元素填充每个元素。

也许是这样的（不确定你是如何创建元素的，所以我只是使用jQuery .append()函数）。

HTML：

<table>
    <tr class="name">
        <th>Name</th>
    </tr>
    <tr class="cost">
        <th>Cost</th>
    </tr>
    <tr class="color">
        <th>Color</th>
    </tr>
</table>

JavaScript的：

var nameHtml = "";
var costHtml = "";
var colorHtml = "";

// Building strings
for (var i = 0; i < ProductsArray.length; i++) {
    nameHtml += "<td>" + ProductsArray[i].Name + "</td>";
    costHtml += "<td>" + ProductsArray[i].Cost + "</td>";
    colorHtml += "<td>" + ProductsArray[i].Color + "</td>";
}

// Adding to rows
$(".name").append(nameHtml);
$(".cost").append(costHtml);
$(".color").append(colorHtml);

这是一个展示示例的JSFiddle。有很多方法可以做到这一点，其他人提出了一些有趣的方法。这里的主要好处是您可以在HTML中自由切换表行而无需更改JavaScript。如果您有任何疑问，请告诉我。希望这有帮助！

基于对象数组创建垂直列表

3 个答案: