Question

我已经为表行提供了循环的东西，但是当我想创建标题<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]，键入[value]，model.marque [value]并将它们放入数组的每个成员的行中并关闭表格... ad haauseam

我的最终结果如下：

<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]，抓住它，然后循环遍历所有兄弟姐妹并将行放在一起....我只想知道如果我这样做，我我声明（并构建）每一行显然不需要的标题/标题。

我感谢Traversal Masters和Mistresses提供的任何见解。我变老了，最近我的大脑已经从热浪中融化了。

Answer 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/

Answer 2

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

}）;

为表创建构建嵌套循环

2 个答案: