在jQuery append方法内添加for循环

Question

我有一个大多数元素都是静态的表，但是我<tr></tr>想使用for循环动态更改它，我只能添加一个for循环来更新表中的所有内容。

for(var x = 0; x< foo.length; x++){//Move the for loop from here
$("div#show_details").append('<table class="'+receipt_no+'" id="print_me" style="background:#ffffff;width:800px;font-family:Roboto;text-align:center;">',
    '<tbody>',
    '<tr><td colspan="3"><h4 style="font-size:20px;color:#009688;text-align:center">Thank you Student Name,</h4></td></tr>',
    '<tr><td colspan="3">Your order for receipt no: <b>'+receipt_no+'</b> has the following items.</td></tr>',
    '<tr><td td colspan="3"></td></tr>',
    '<tr><td>#</td><td style="text-align:left">Item</td><td>Price</td></tr>',
    //I want to use a for loop inside here

    '<tr><td>'+foo[x].foodCount+'</td><td style="text-align:left">'+foo[x].foodName+'</td><td>'+foo[x].price+'</td></tr>',
    '<tr style="font-weight:bold"><td colspan="2" style="text-align:left">Total</td><td>'+foo[0].price*foo[0].foodCount+'</td></tr>',
    '</tbody>',
    '</table>',
    '<a class="btn btn-xs btn-info" href="javascript:void(processPrint());">Print</a>'
    );
    }

我无法在append方法内部添加for循环以确保仅<tr><td>'+foo[x].foodCount+'</td><td style="text-align:left">'+foo[x].foodName+'</td><td>'+foo[x].price+'</td></tr>',更改的内容 。任何帮助将不胜感激。

Answer 1

您不能在其中放置循环，您需要重新考虑如何做-例如，使用循环创建具有“动态”内容的字符串，然后将该字符串用作附加内容的一部分，例如

var dynamic = "";
for (var x = 0; x < foo.length; x++) { //Move the for loop from here
    dynamic += '<tr><td>' + foo[x].foodCount + '</td><td style="text-align:left">' + foo[x].foodName + '</td><td>' + foo[x].price + '</td></tr>';
};
$("div#show_details").append('<table class="' + receipt_no + '" id="print_me" style="background:#ffffff;width:800px;font-family:Roboto;text-align:center;">',
    '<tbody>',
    '<tr><td colspan="3"><h4 style="font-size:20px;color:#009688;text-align:center">Thank you Student Name,</h4></td></tr>',
    '<tr><td colspan="3">Your order for receipt no: <b>' + receipt_no + '</b> has the following items.</td></tr>',
    '<tr><td td colspan="3"></td></tr>',
    '<tr><td>#</td><td style="text-align:left">Item</td><td>Price</td></tr>',
    dynamic,
    '<tr style="font-weight:bold"><td colspan="2" style="text-align:left">Total</td><td>' + foo[0].price * foo[0].foodCount + '</td></tr>',
    '</tbody>',
    '</table>',
    '<a class="btn btn-xs btn-info" href="javascript:void(processPrint());">Print</a>'
);