如何複雜的HTML代碼添加到一個for循環

我是個有點新的處理JSON純粹使用jQuery和HTML（使用Django的/ Python的工作）如何複雜的HTML代碼添加到一個for循環

怎麼會是追加一個最優雅/清潔方式像這樣的複雜html塊？

   $.getJSON(url,function(data){ 
       $.each(data, function(i, object){ 

        $("#campaign_table tbody").append(
         '<tr class="toggle">' + 
          ' <td>' + object.firstImpression + '</td>' + 
          ' <td class="text-left">' + object.name + '</td>' + 
          ' <td>' + object.impressions + '</td>' + 
          ' <td>' + object.clicks + '</td>' + 
          ' <td>' + object.clickRate + '</td>' + 
          ' <td>' + object.sales + '</td>' + 
          ' <td>' + object.salesRate + '</td>' + 
         '</tr>' + 
          '<tr class="tablesorter-childRow ">' + 
          ' <td></td>' + 
          ' <td class="text-left"> Non targeted </td>' + 
          ' <td>' + object.nonTargeted.impressions + '</td>' + 
          ' <td>' + object.nonTargeted.clicks + '</td>' + 
          ' <td>' + object.nonTargeted.clickRate + '</td>' + 
          ' <td>' + object.nonTargeted.sales + '</td>' + 
          ' <td>' + object.nonTargeted.salesRate + '</td>' + 
          '</tr>' + 
          '<tr class="tablesorter-childRow ">' + 
           ' <td></td>' + 
           ' <td class="text-left"> Non targeted </td>' + 
           ' <td>' + object.targeted.impressions + '</td>' + 
           ' <td>' + object.targeted.clicks + '</td>' + 
           ' <td>' + object.targeted.clickRate + '</td>' + 
           ' <td>' + object.targeted.sales + '</td>' + 
           ' <td>' + object.targeted.salesRate + '</td>' + 
          '</tr>' 
        ); 

       }); 
       });

來源

2013-10-04 ChromeToaster

有不同的方法來做到這一點，但我認爲沒有錯用它。此外，這個問題更適合http://codereview.stackexchange.com/ – Archer

就我個人而言，我也會這樣做。以這種格式閱讀和修改很容易。除非別人可以提供不這樣做的理由，否則我會說保持這樣。 – Novocaine

我會試着做一個'addRow（）'函數，但除此之外我同意。有時候，可讀性比簡化代碼更重要。 – Archer

你有什麼肯定是可行的，但你可能要一個單獨的函數，它遍歷指定的對象（例如一個功能，您可以使用object，object.nonTargeted和object.targeted）。

在這種情況下，您可能會喜歡的一個概念是JavaScript客戶端模板。例如，使用Handlebars.js你可以有一個模板，看起來像HTML：

<tr> 
    <td>{{firstImpression}}</td> 
    <!-- other cells --> 
</tr>

和JS：

$("#table").append(Handlebars.compile($("#template").html())(object));

http://jsfiddle.net/5W4bx/

來源

2013-10-04 13:10:50

我在發帖之前看了一下把手，但是項目截止日期並不能讓我冒險進入未知的理由：/所以我會看到我可以用對象循環，我想其餘的應該是沒事的。非常感謝您的反饋！ – ChromeToaster

如何複雜的HTML代碼添加到一個for循環

回答

相關問題