jQuery 안에 for 루프 추가하기

Question

대부분의 요소가 static.I 인 테이블을 가지고 있는데, 하나의 <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>' 
    ); 
    } 

나는 문제 <tr><td>'+foo[x].foodCount+'</td><td style="text-align:left">'+foo[x].foodName+'</td><td>'+foo[x].price+'</td></tr>',의 내용이 변경되는 것을 보장하기 위해 append 방법의 내부 for 루프를 추가하는 데입니다. 어떤 도움을 주시면 감사하겠습니다.

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>' 
);