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吗？

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

Answer 2

我刚刚更改了我的jquery代码并在js变量上分配了php foreach部分。

<script>
    $(".addmore").on('click',function(){
      addNewRow();

    });

    var ss = "<?php foreach ($product as $key ):?> <option value=\"<?php echo $key['product_name']  ?>\"><?php echo $key['product_name'] ?></option><?php  endforeach; ?>";
    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>' + ss + '</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();
                });

    </script>

JQuery动态输入字段功能不能与php foreach一起使用？

2 个答案: