javascript - 在 Javascript 代码中包含 PHP 的正确方法

Question

我正在尝试通过按一下按钮添加一些动态行。我正在使用的示例运行良好，但出于某种原因，我认为我在 Javascript 中使用 PHP 的方式破坏了一切。我不断在控制台上收到此错误。

未捕获的 SyntaxError：意外的标识符

这是我的 HTML 代码和 js 代码。有没有办法解决这个问题？

<table class="table table-bordered" id="orderItems2">
                    <thead>
                        <tr>
                            <th>Product Code</th>
                            <th>WSP</th>
                            <th>Margin</th>
                            <th>DP</th>
                            <th>Std Bonus</th>
                            <th>Min Qty</th>
                            <th>Spcl Bonus</th>
                            <th>Case Size</th>
                            <th>Cases</th>
                            <th>Qty</th>
                            <th>Free Issues</th>
                            <th>Total</th>
                            <th>Current Qty</th>
                            <th>Stock Value</th>
                        </tr>
                    </thead>
</table>

这是我拥有的静态行，当我按下添加按钮时，我正在尝试创建这些行。

 <tr class="distributorItemDetails">
                            <td>
                                <div class="form-group">
                                    <select class="item-details form-control select2" name="items[1][product_code]" style="width: 100%;">
                                        <option selected="selected" value="" required>Select Product</option>
                                        <?php foreach ($products as $product):?>
                                            <option 
                                                data-wholesaleprice="<?= h($product->whole_sale_price)?>" 
                                                data-distributormargin="<?= h($product->distributor_margin)?>" 
                                                data-stdbonus="<?= h($product->standard_bonus_minimum_qty.":".$product->standard_bonus_free_issues)?>"
                                                data-standard_bonus_minimum_qty="<?= h($product->standard_bonus_minimum_qty)?>"
                                                data-standard_bonus_free_issues="<?= h($product->standard_bonus_free_issues)?>"
                                                data-minqty="<?= h($product->minimum_qty_to_apply_special_bonus)?>" 
                                                data-scplbonus="<?= h($product->special_bonus_minimum_qty.":".$product->special_bonus_free_issues)?>" 
                                                data-special_bonus_minimum_qty="<?= h($product->special_bonus_minimum_qty)?>" 
                                                data-special_bonus_free_issues="<?= h($product->special_bonus_free_issues)?>" 
                                                data-casesize="<?= h($product->case_size)?>"
                                                value="<?= h($product->product_code)?>" required><?= h($product->product_code)?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-wholesaleprice" name="items[1][wholesale_price]" required min="0" step="any" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-distributormargin" name="items[1][distributor_margin]" required min="0" step="any" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-distributorprice" name="items[1][distributor_price]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="text" class="form-control val-sb" name="items[1][standard_bonus]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-minqty" name="items[1][min_qty]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="text" class="form-control val-scplbonus" name="items[1][special_bonus]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-casesize" name="items[1][case_size]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-noofcases" name="items[1][no_of_cases]">
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-totalqty" name="items[1][total_qty]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-freeissues" name="items[1][total_free_issues]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-totalprice" name="items[1][total_value]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-currentqty" name="items[1][balance_stock]">
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-stockvalue" name="items[1][stock_value]" readonly>
                                </div>
                            </td>
                        </tr> 

假设添加新行的 HTML 按钮

<a class="btn btn-primary addNewRow" id="addtwo" ><i class="fa fa-plus"></i></a>

JS 和我拥有的 PHP 脚本。

<script>
var count=1;
$("#addtwo").click(function(){
    var html="<tr class='distributorItemDetails'><td><div class='form-group'><select class='item-details form-control select2' name='items["+count+"][product_code]' style='width: 100%;'><option selected='selected' required>Select Product</option>"<?php foreach ($products as $product):?>" <option data-wholesaleprice="<?= h($product->whole_sale_price)?>" data-distributormargin="<?= h($product->distributor_margin)?>" data-stdbonus="<?= h($product->standard_bonus_minimum_qty."':'".$product->standard_bonus_free_issues)?>" data-standard_bonus_minimum_qty="<?= h($product->standard_bonus_minimum_qty)?>" data-standard_bonus_free_issues="<?= h($product->standard_bonus_free_issues)?>" data-minqty="<?= h($product->minimum_qty_to_apply_special_bonus)?>" data-scplbonus="<?= h($product->special_bonus_minimum_qty."':'".$product->special_bonus_free_issues)?>" data-special_bonus_minimum_qty="<?= h($product->special_bonus_minimum_qty)?>" data-special_bonus_free_issues="<?= h($product->special_bonus_free_issues)?>" data-casesize="<?= h($product->case_size)?>" value="<?= h($product->product_code)?>" required>"<?= h($product->product_code)?>"</option>"<?php endforeach; ?>"'</select></div></td><div class='form-group'><input type='number' class='form-control val-wholesaleprice' name='items["+count+"][wholesale_price]' required min='0' step='any' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-distributormargin' name='items["+count+"][distributor_margin]' required min='0' step='any' readonly></div></td><td><div class='form-grou'><input type='number' class='form-control val-distributorprice' name='items["+count+"][distributor_price]' readonly></div></td><td><div class='form-group'><input type='text' class='form-control val-sb' name='items["+count+"][standard_bonus]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-minqty' name='items["+count+"][min_qty]' readonly></div></td><td><div class='form-group'><input type='text' class='form-control val-scplbonus' name='items["+count+"][special_bonus]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-casesize' name='items["+count+"][case_size]' readonly></div></td><td><div class="form-group"><input type='number' class='form-control val-noofcases' name='items["+count+"][no_of_cases]'></div></td><td><div class='form-group'><input type='number' class='form-control val-totalqty' name='items["+count+"][total_qty]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-freeissues' name='items["+count+"][total_free_issues]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-totalprice' name='items["+count+"][total_value]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-currentqty' name='items["+count+"][balance_stock]'></div></td><td><div class='form-group'><input type='number' class='form-control val-stockvalue' name='items["+count+"][stock_value]' readonly></div></td></tr>";

    $("#orderItems2").append(html);
    count++;
});

标签： javascriptphphtml