Javascript 如何动态添加行-jquery与ajax和php的结合？

这是我的桌子结构

这是我的输出。

这是我的密码：

<table width="100%" id="controltable" border="1">
   <tr>
    <th>
        Product Name
    </th>

    <th>
        Product Price
    </th>

    <th >
        Quantity
    </th>

    <th >
        Calculate Price
    </th>

    <th >
        Amount
    </th>
</tr>

<tr>
    <td>
        <?php
            echo '<select style="padding: 5px;" id="selectprice" name="prodlist">';
            echo '<option value="">Select Product</option>';
            $sql = mysql_query("SELECT * FROM prod_list");
            while($row = mysql_fetch_array($sql)){
                $get_prod = $row['prod_name'];
                echo '<option value='.$get_prod.'>'.$get_prod.'</option>';
            }
            echo '</select>';
            echo '<input type="hidden" name="price" id="hiddenconstvalue"  value=""/>';
            ?>

            <?php
            echo '<input type="hidden" name="hiddenresult" id="hiddenresult"  value=""/>';
            ?>
    </td>

    <td>
        <div id="output_frame"></div>
    </td>

    <td>
        <?php echo '<input type="text" style="width: 50px;" name="qnty" id="qnty"  value=""/>';?>
    </td>

    <td>
        <?php echo '<a href="javascript:void(0)" style="text-decoration: none;" onClick="show_price()">Calculate</a>'; ?>
    </td>

    <td>
        <div id="result"></div>

    </td>

</tr>

</table>

**Javascript Code**
  <script type="text/javascript">
    $(document).ready(function(){
     $('#selectprice').on('change', function() {


 $.get("get_price.php?prodId="+$(this).val(), function( data ) {

     $('input[name=price]').val(data);
     document.getElementById('output_frame').innerHTML = data;
    });
});
    });


   function show_price()
    {

     var textValue1 = document.getElementById('hiddenconstvalue').value;
     var textValue2 = document.getElementById('qnty').value;

     document.getElementById('result').value = textValue1 * textValue2;
     document.getElementById('result').innerHTML = textValue1 * textValue2;

    }

品名
产品价格
量
计算价格
数量
假设Ajax调用返回HTML表行数据，可以执行以下操作

jQuery('#myTable tbody').append(response.html);

希望这有帮助。
一定有按钮。所以，若用户点击它，应该在下拉列表中添加一行产品名称。你们似乎有竞争条件。如果用户在AJAX请求响应到达之前更改了产品并单击了按钮，该怎么办？将更新
#hiddenconstvalue
元素，但将根据旧数据重新计算
#result
元素。（不要忘记：如果这是在现实世界中运行的，那么网络连接可能会比测试设置中慢很多。）为什么不从AJAX响应处理程序和按钮处理程序调用
show\u price
？用户在更换产品时甚至不需要按下按钮。哦，怎么做，兄弟？有什么建议吗？但无论如何，当产品改变时，价格也会改变，所以这不会是一个问题，对吧？价格不会立即改变。这是通过AJAX请求完成的。这是异步的，这意味着响应不会立即到达，其他代码（可能包括click处理程序）会在响应到达之前运行。（如果您在同一台机器上，甚至在同一个网络上运行客户端和服务器，那么连接可能太快，您无法复制此错误。）我是说您应该添加一行
show_price（）在函数中，在已经存在的代码之后，开始
函数（数据）{
。