使用jquery在下面添加行答案

【问题标题】：Add row below using jquery使用jquery在下面添加行
【发布时间】：2015-05-10 17:57:24
【问题描述】：

我想添加与以前完全相同的行，以及所有元素。在这里，我有两个选择选项。首先，我选择类别，然后产品会出现，我也选择产品。之后我选择数量，然后会自动出现单价、小计和总计。

这是我想在下面复制的代码。

<tr style="text-align:center">
    <td>
        <select name="selectCategory" id="selectCategory" class="form-control" style="width: 140px">
           <option value="">-- Category --</option>
 <?php
      $queryCategory = "SELECT * FROM category";
      $sqlCategory = mysql_query($queryCategory);
      while ($row = mysql_fetch_array($sqlCategory)) {
          echo '<option value="' . $row['category_id'] . '">' . $row['category_name'] . '</option>';
      }
?>
        </select>
     </td>
     <td>
        <select name="selectProduct" id="selectProduct" class="form-control" style="width: 330px">
           <option value="">-- Product --</option>
           <!-- Show the products list -->
        </select>
     </td>
     <td>
         <input type="number" name="txtQty" id="txtQty" class="form-control" value="1" min="1" onchange="calculate()" style="width: 80px; text-align: center"/>
     </td>
     <td>
        <input type="text" name="txtPrice" id="txtPrice" class="form-control" style="text-align:center" readonly/>
     </td>
     <td>
        <input type="text" name="txtTotal" id="txtTotal" class="form-control" style="text-align:center" readonly/>
     </td>
</tr>

我正在考虑使用 jQuery，我找到了示例，但我还不明白。

【问题讨论】：

欢迎来到 Stack Overflow！这个问题不太清楚，您能否编辑您的帖子以使我们更容易理解您想要做的事情？
嗨。欢迎.. 所以，你有两个 select 元素。第一个是使用 PHP 预填充的。第一个select有问题吗？
第二个select 为空。如果我理解正确。你想填充第二个select，这取决于用户在第一个上选择的内容是否正确？
All ：实际上我想附上图片，但我不能，因为我的声誉低于 10。根据问题。我有 2 个选择选项。首先：我选择从数据库生成的类别。然后第二个选择选项将显示产品名称。我也选它。然后我选择数量，最后价格等会自动计算。所以我的问题是，如何复制这两个选择选项、数量等？
第二个select应该从哪里得到它的信息？

标签： php jquery ajax row clone

【解决方案1】：

假设您希望在第一行下方的另一行包含您选择的信息，我会这样做：

<script>
    $("#selectProduct").change(function() {
        var currentProduct = $(this).val();
        var currentCategory = $("#selectCategory").val();
        var row = "<tr><td>" + currentProduct + "</td><td>" + currentCategory + "</td><td></td><td></td></tr>";
        $("table").append(row);
    });
</script>

现在，如果你有一个按钮并且你想像上面提到的那样进行克隆，我会做这样的事情：

<table>
    <tr class="active_row">
        <td>
            <select name="selectCategory" id="selectCategory" class = "form-control" style = "width: 140px">
                <option value = ""> --Category --</option>
                <!-- your PHP options -->
            </select>
        </td>
        <td>
            <select name="selectProduct" id="selectProduct" class="form-control" style="width: 330px">
                <option value="">-- Product --</option>
                <!-- your PHP options -->
            </select>
        </td>
        <td><!-- quantity info --> </td>
        <td><!-- price info --> </td>
        <td><!-- subtotal info --> </td>
    </tr>
</table>

<script>
$("#add_row_button").click(function(){
    var $row_clone = $(".active_row").clone();
    $(".active_row").addClass("row");
    $(".active_row").removeClass("active_row");
    $("table").append($row_clone);
});
</script>

【讨论】：