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

你不能在那里放一个循环，你需要重新考虑如何做到这一点 - 例如使用＆＃34; dynamic＆＃34;创建一个字符串使用循环的内容，然后使用该字符串作为附加内容的一部分，如

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

Answer 2

我认为在jQuery append方法中循环可能会更加混乱，但是您可以使用PHP附加循环表列并使用ajax附加它。这就是我现在所做的。

PHP查询文件 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;

和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： pafmcn_rownun 已经在我的javacript文件中声明并初始化为 1 的值，每次单击该按钮都会在第一列上添加1个计数这一行。

在jQuery追加方法

2 个答案: