使用 jquery 在下方添加行

Question

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

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

<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 并找到了示例，但我还不明白。

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

使用 jquery 在下方添加行

Add row below using jquery

php

jquery

ajax

row

clone