构建表格创建的嵌套循环

Question

我已经有了表格行的循环操作，但是当我想创建标题行<th>时，我很茫然。

例如，我可以遍历下来抓住“汽车品牌”，并在第一个成员的ONE常规表格行中创建一个包含品牌名称和细节的表格，但获得嵌套循环继续为所有“兄弟姐妹” “阵列正在让我疯狂。我不能走简单的路线，只是使用数组名，因为它不是“人类友好”

想象一下以下内容：

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生厌。

我最终的结果会是什么样子：

<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 [值]，拿着它，然后遍历所有的兄弟姐妹，并把行在一起....我只是想，如果我这样做，我声明（和构造）每一行的标题/标题，显然是不希望的。

我感谢你为你提供的任何洞察力而设计的Traversal Masters and 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) 
}); 

}）;