如何动态添加行 - jquery与ajax php组合？

Question

这是我的表结构。

这是我的输出。

这是我的代码：

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

    }

这里一切正常。当用户选择产品说如图所示的strepsils时，它将自动获取产品的价格。我通过使用ajax实现了这一点。选择产品后，将列出价格，并允许用户输入数量。因此，当点击计算价格将被caclulated。现在我需要的是，如果用户想要添加更多文件，则说第二个产品为vinly它应该自动附加到上表并且应该计算总体价格。怎么做？请帮忙。

Answer 1

假设您的Ajax调用返回HTML表行数据，您可以执行以下操作

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

希望这有帮助。