0

我已经将表格行的循环功能降低了很多，但是当我想创建标题<th>行时，我不知所措。

例如，我可以向下遍历以获取“汽车品牌”并在第一个成员的一个普通表行中创建一个包含品牌名称和细节的表，但是让嵌套循环继续为所有“兄弟”数组运行我疯了。我不能走简单的路线而只使用数组名称，因为它不是“人类友好的”

想象一下：

a-r: [{
    country: "Italy",
    id: "194",
    type: "sports",
    style: {
        doors: "2",
        layout: "rwd"
    },
    model: {
        name: "Alfa Romeo",
        marque: "Spider",
        slug: "alfa-romeo-spider",
        id: "59"
    },
    url: "http://www.alfaromeo.it"
}, {
    country: "Italy",
    id: "195",
    type: "sports",
    style: {
        doors: "2",
        layout: "rwd"
    },
    model: {
        name: "Alfa Romeo",
        marque: "Graduate",
        slug: "alfa-romeo-graduate",
        id: "60"
    },
    url: "http://www.alfaromeo.it"
}],
packard: [{
    country: "USA",
    id: "200",
    type: "sedan",
    style: {
        doors: "4",
        layout: "rwd"
    },
    model: {
        name: "Packard",
        marque: "Phantom",
        slug: "packard-phantom",
        id: "80"
    },
    url: "http://www.packard.com"
}, {
    country: "USA",
    id: "220",
    type: "coupe",
    style: {
        doors: "2",
        layout: "rwd"
    },
    model: {
        name: "Packard",
        marque: "626",
        slug: "packard-626",
        id: "305"
    },
    url: "http://www.packard.it"
}],[...]

所以，我需要基本上遍历到第一个“model.name”实例，获取该值并将其放入表头或标题中......无论如何。

然后我需要运行另一个循环来获取 country[value]、type[value]、model.marque[value] 并将它们放入数组中每个成员的行中并关闭表格......令人作呕。

我的最终结果将如下所示：

<table>
 <thead>
  <tr>
    <th colspan=3>Obj.model.name</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>Obj.model.marque</td><td>Obj.country</td><td>Obj.type</td>
   </tr>
   <tr>
    <td>{...}</td><td>{...}</td><td>{...}</td>
   </tr>
   <tr>
    <td>{...}</td><td>{...}</td><td>{...}</td>
   </tr>
 </tbody>
</table>

我试图以某种方式，在循环中，抓住最初的model.name [value]，持有它，然后循环所有兄弟姐妹并将行放在一起......我只是想如果我这样做，我声明（并构造）显然不需要的每一行的标题/标题。

我感谢穿越大师和情妇，感谢您提供的任何见解。我变老了，最近我的大脑已经被热浪融化了。

4

2 回答 2

1

您通常只需要记住name循环外部的当前值，并在每次更改时创建一个新表（带有新标题）：

var name = null;
var table = null;

$.each(a, function(k, v) {
    $(v).each(function() {

        if (this.model.name !== name) {
            name = this.model.name;
            table = $('<table>').appendTo(document.body);
            var thead = $('<thead>').appendTo(table);
            $('<th>', {
                colspan: 3,
                text: name
            }).appendTo(thead);
        }

        $('<tr>').appendTo(table).append(
            $('<td>', { text: this.model.marque }),
            $('<td>', { text: this.country }),
            $('<td>', { text: this.type })
        );
    });
});

演示http://jsfiddle.net/alnitak/2jvSS/

于 2012-07-21T20:34:11.443 回答
0

我在JSFIDDLE中有这个设置。下面也是循环代码。请让我知道这可不可以帮你。谢谢我已经更新了答案，小提琴请检查并确认。

$(function() { 
$.each( a, function(k, v) {

    var table = document.createElement('table');
    var thead = document.createElement('thead');
    var tbody = document.createElement('tbody');

       $(v).each(function() {

       var theadRow = document.createElement('tr');
       var tbodyRow = document.createElement('tr');

       var nametd = document.createElement('th');  

       var name = $(theadRow).html($(nametd).attr('colspan', 3).html(this.model.name));
       $(thead).html(name); 

       var marquetd = document.createElement('td');  
       $( marquetd).html(this.model.marque).appendTo(tbodyRow);

       var countrytd = document.createElement('td');
       $(countrytd).html( this.country ).appendTo(tbodyRow);

       var typetd = document.createElement('td');
       $(typetd).html( this.type ).appendTo(tbodyRow);

       $(tbody).append(tbodyRow);

       $(table).append($(tbody).append(tbodyRow));

   });
    $(table).append(thead)
    $('.output').append(table)
});

});​</p>

于 2012-07-21T18:38:54.807 回答