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

【问题标题】：JQuery dynamic input field function not working with php foreach?JQuery动态输入字段功能不适用于php foreach？
【发布时间】：2017-04-05 16:40:55
【问题描述】：

这是我的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 循环来填充动态字段。解决这个问题的最佳方法是什么。

【问题讨论】：

一般来说，这种风格很糟糕。如果您需要在后端使用 PHP 渲染 HTML，请单独执行。这种代码混淆是上个世纪的风格。不确定是否有人再次需要这段代码......

标签： javascript php jquery mysql foreach

【解决方案1】：

我马上看到了两个问题：

1) addNewRow 函数接受一个参数 (id)，但在调用它时并没有传递参数；你只有addNewRow() 没有参数。你也可以像这样组合代码：

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

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

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

【讨论】：

谢谢，但我已经解决了我的问题。再次感谢您。

【解决方案2】：

我刚刚更改了我的 jquery 代码并将 php foreach 部分分配给一个 js 变量。

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

【讨论】：