javascript - JQuery 动态输入字段功能不适用于 php foreach？

Question

这是我的 html

<table class="table table-borderd table-hover">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Discount %</th>
            <th>Total</th>
            <th>
                <input type="button" class="btn btn-primary addmore" value="+">
            </th>
        </tr>
    </thead>
    <tbody id="itemlist2">
        <tr id="tr_1">
            <td class="prod_c">
                <select class="select-product form-control" id="itemName_1" name="product_name[]">
                     <option value=""></option>
                     <?php foreach ($product as $key ): ?>
                     <option value="<?php echo $key['product_name'] ?>">
                         <?php echo $key['product_name'] ?>
                     </option>
                     <?php endforeach; ?>
                 </select>
             </td>
             <td>   
                 <input type="text" name="price[]" id="price_1" class="price form-control" value=""  data-cell="C1">
             </td>
             <td>
                 <input type="text" data-cell="D1" name="quantity[]" id="quantity_1" class="qty form-control">
             </td>
             <td>
                 <input type="text" data-cell="E1" name="discount[]" id="discount_1" class="form-control">
             </td>
             <td>
                 <input type="text" data-cell="F1" data-formula="(C1*D1)-(C1*D1*E1/100)" name="total[]" id="total_1" class="amount form-control">
             </td> 
         </tr>
     </tbody>
 </table>

动态输入框jQuery函数

<script>
$(".addmore").on('click',function(){
    addNewRow();
});
var addNewRow = function(id){
    html =  '<tr id="tr_'+i+'">';
    html += '<td class="prod_d"><select class="select-product form-control" name="product_name[]" id="itemName_'+i+'"><option value=""></option><?php
                        foreach ($product as $key ):
                          ?><option value="<?php echo $key['product_name']  ?>"><?php echo $key['product_name'] ?></option><?php  endforeach; ?></select></td>';
    html += '<td><input type="text" data-cell="C'+i+'" type="text" name="price[]" id="price_'+i+'" class="price form-control"></td>';
    html += '<td><input type="text" data-cell="D'+i+'" name="quantity[]" id="quantity_'+i+'" class="qty form-control"></td>';
    html += '<td><input type="text" data-cell="E'+i+'"  name="discount[]" id="discount_'+i+'" class="form-control"></td>';
    html += '<td><input type="text" data-cell="F'+i+'" data-formula="(C'+i+'*D'+i+')-(C'+i+'*D'+i+'*E'+i+'/100)" id="total_'+i+'" name="total[]" class="amount form-control"></td>';
    html += '<td><a href="#" class="remove">Remove</a></td>';
    html += '</tr>';

    $('#itemlist2').append(html);

    $form.calx('update');
    $form.calx('getCell', 'G1').setFormula('SUM(F1:F'+i+')');

    console.log(id);
    $('#price_'+i).focus();
    i++;
}

$('#itemlist2').on('click', '.remove', function(){
    $(this).parent().parent().remove();
    $form.calx('update');
    $form.calx('getCell', 'G1').calculate();
});

</scrtipt>

当我删除 php foreach 循环时，它可以工作，但是 php foreach 循环不起作用。我无法创建新行。

我需要包含 php foreach 循环来填充动态字段。解决这个问题的最佳方法是什么。

Answer 1

我立即发现两个问题:

1) addNewRow 函数接受一个参数 (id)，但在调用它时并未向其传递参数；您只需使用不带参数的 addNewRow() 即可。您还可以像这样组合代码:

$(".addmore").click(function(id) {
   var html = ...

在 addNewRow 函数中，您将 i 添加到所有内容，但该变量未定义。您的意思是它是您应该传递给函数的 id 吗？

我不确定这是否能完全解决您的问题，但这是一个好的开始。