javascript - 如何动态添加行 - 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;

    }

这里一切正常。当用户选择一个产品(如图所示)时，它会自动获取该产品的价格。我是用ajax实现的。选择产品后，将列出价格，并且允许用户输入数量。所以当点击计算时，价格就会被计算出来。现在我需要的是，如果用户想要添加更多字段，例如第二个产品，那么它应该自动附加到上表中，并且应该计算总体总价。怎么做？请帮忙。

Answer 1

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

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

希望这有帮助。