Javascript 如何用php动态创建数据库驱动的选择字段

我正在尝试用PHP+MySQL制作一个发票脚本。我做了我的发票输入屏幕。一切正常。我还添加了“添加新行”按钮

问题是，当我单击“添加新行”时，第一行上使用的所有函数都被禁用。我没有足够的JS知识

代码如下：

PHP:

不
产品编号
描述
价格
量
数量

JS:

$（“#ekle”）。单击（函数（）{
美元（“#ekleaq”）
.append（'\
""  \
');
});
功能显示数据（obj）
{
document.getElementById（'description1'）。value=obj.getAttribute（'data-ax1'）；
document.getElementById（'price1'）。value=obj.getAttribute（'data-ax2'）；
}
函数计算数据（输入）
{
price=document.getElementById（'price1'）；
数量=document.getElementById（'quantity1'）；
amount1.value=price.value*quantity.value；
}

“第一行上使用的所有功能都被禁用”

-这到底是什么意思？您能详细说明一下吗？这显然意味着

ShowData

不适用于动态添加的元素。我建议您打开开发人员控制台，查看语法错误。@u_mulder-对我们来说问题很明显，是的-但对OP来说显然不明显。

“第一行中使用的所有函数都被禁用”

-这到底是什么意思？您能详细说明一下吗？这显然意味着

ShowData

不适用于动态添加的元素。我建议您打开开发人员控制台，查看语法错误。@u_mulder-对我们来说问题很明显，是的-但对OP来说显然不明显。

<div class="table-striped" id="dataTable">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Product No</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Amount</th> 
                </tr>
            </thead>
            <tbody id="ekleaq">
                <tr>
                    <td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td>
                    <td>
                    <div class="col-xs selectContainer">
                    <select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])">
                        <?php
                            while($row = $result1->fetch_assoc()){
                                unset($id, $name, $ax1, $ax2);
                                $id = $row['inv_products_id'];
                                $name = $row['inv_products_no'];
                                $ax1 = $row['inv_products_desc'];
                                $ax2 = $row['inv_products_price'];
                                echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>';
                            }
                        ?>
                    </select>
                    </div>
                    </td>
                    <td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td>
                    <td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td>
                    <td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td>
                    <td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td>
                    <td><button type="button" class="btn btn-default addButton" id="ekle"><i class="fa fa-plus"></i></button></td>
                </tr>
            </tbody>
        </table>
    </div>

<script>
$("#ekle").click(function(){
    $("#ekleaq")
      .append('<tr><td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td><td> \
    <div class="col-xs selectContainer"><select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])"> "<?php while($row = $result1->fetch_assoc()){ unset($id, $name, $ax1, $ax2);$id = $row['inv_products_id'];$name = $row['inv_products_no'];$ax1 = $row['inv_products_desc'];$ax2 = $row['inv_products_price'];echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>'; } ?>" </select> \
                                        </div></td><td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td><td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td><td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td><td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td></tr>');
});

function ShowData(obj)
{
    document.getElementById('decription1').value = obj.getAttribute('data-ax1');
    document.getElementById('price1').value = obj.getAttribute('data-ax2');
}

function CalculateData(input)
{
    price = document.getElementById('price1');
    quantity = document.getElementById('quantity1');
    amount1.value = price.value * quantity.value;
}
</script>