Adding a for loop inside jQuery append method

Question

I am having a table into which most elements are static.I however I have one <tr></tr> that i want to change dynamically using a for loop.I have only been able to add a for loop that updates everything in the table.

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

I am having trouble adding the for loop inside of the append method to ensure that only contents of <tr><td>'+foo[x].foodCount+'</td><td style="text-align:left">'+foo[x].foodName+'</td><td>'+foo[x].price+'</td></tr>', are changed. Any help will be appreciated.

Jaromanda X · Accepted Answer · 2017-05-13 05:00:24Z

5

you can't put a loop in there, you'll need to rethink how you do that - e.g. create a string with the "dynamic" content using a loop, then use that string as part of the appended content, something like

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

answered May 13, 2017 at 5:00

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

E_K Over a year ago

That's awesome. Thank's

Stephen Rauch · Accepted Answer · 2018-03-23 02:05:17Z

I think looping inside your jQuery append method can be more confusing but you can append a looped table columns using PHP and append it using ajax. Here's what I did just right now.

PHP query file container.php

<?php require 'dbcon.php';
$pafcmcnres = "";
$pafmcnquery = "SELECT iqa_doctypes_short FROM iqa_doctypes;";
$pafmcnexec = mysqli_query($con, $pafmcnquery);
$pafmcncnt = mysqli_num_rows($pafmcnexec);
while($pafmcnrows = mysqli_fetch_array($pafmcnexec)){
    $pafcmcnres = $pafcmcnres."<td style='min-width: 45px; max-width: 45px;'></td>";
    }

echo $pafcmcnres;

and for the jQuery ajax

    $('#addrow_btn').click(function(){
    pafmcn_rownun += 1;
    $.ajax({
        type: 'POST',
        url: 'php/container.php',
        cache: false,
        success: function(pafmcn_cols){
            $('#id_of_the_column_to_be_appended').append("\
                <tr>\n\
                    <td>"+ pafmcn_rownun +"</td>\n\
                    <td> </td>\n\
                    <td> </td>\n\
                    <td> </td>\n\
                    <td> </td>"
                    + pafmcn_cols +
                    "<td> </td>\n\
                    <td> </td>\n\
                    <td> </td>\n\
                </tr>");
        }
    });
});

PS: the pafmcn_rownun is already declared and initialized with the value of 1 in my javacript file and each click of the button will add 1 count on the first column of the row.

Collectives™ on Stack Overflow

Adding a for loop inside jQuery append method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related