0

テーブル行のループはかなり下がっていますが、ヘッダー<th>行を作成したいときは途方に暮れています。

たとえば、下に移動して「自動ブランド」を取得し、最初のメンバーから1つの通常のテーブル行にブランド名と詳細を含むテーブルを作成できますが、ネストされたループを取得してすべての「兄弟」配列を継続す​​ることができます。私はばかげています。「人間にやさしい」わけではないので、単純なルートをたどることはできず、配列名を使用するだけです。

次のことを想像してみてください。

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]を取得し、それらを配列のすべてのメンバーの行に配置して、テーブルを閉じる必要があります...adnauseam。

私の最終結果は次のようになります。

<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 に答える