如何動態添加行-與ajax php組合的jQuery？

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;

    }

在這里一切正常。 當用戶選擇如圖所示的“喘不過氣來”產品時，它將自動獲取產品的價格。 我使用ajax實現了這一點。 選擇產品后，將列出價格，並允許用戶輸入數量。 因此，當點擊計算時，價格將被計算。 現在我需要的是，如果用戶想添加更多商品，請說第二種產品，因為它應該自動添加到上表中，並且應該計算出總體價格。 怎么做？ 請幫忙。

Answer 1

假設您的Ajax調用返回HTML表行數據，則可以執行以下操作

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

希望這可以幫助。