Question

所以我在html表中添加一行。我在行中有一个复选框，所以我需要增加我正在添加的输入的数组键，以便我可以检查是否设置了复选框。这是html

<tr>
   <td><img src="/pics/deleteRow.png" class="delete"> </td>
   <td class="productColumn">

   <select name="productInputName[<?php echo $rowNum; ?>]" class="productSelect" >
     <option></option>
     <?php
     foreach($productList as $product){
        //Get options
      }
      ?>
     </select>

      </td>
      <td><input class="quantityField" name="quantity[<?php echo $rowNum; ?>]"type="number" <?php echo ' value="',$detail->getQuantity(),'"';   ?>></td>
      <td><input class="quantityReturnedField" name="quantityReturned[<?php echo $rowNum; ?>]" type="number" <?php echo ' value="',$detail->getQuantityReturned(),'"';   ?>></td>
      <td> <input class="priceField" name="price[<?php echo $rowNum; ?>]" type="number" step="any"
             <?php echo ' value="', $detail->getPrice(), '"'; ?>></td>
      <td ><input class="subtotalField" type="number" step="any" readonly="readonly"></td>
      <td ><input class="specialOrder" type="checkbox" name="specialOrder[<?php echo $rowNum; ?>]" <?php if($detail->getSpecialOrder()){ echo 'checked="checked"';} ?>>Special Order</td>

 </tr>

这是jQuery

var rowNum = 300;

$('.productSelect').change(function() {
    insertBlankRow(1);
});

function insertBlankRow(numRows){
    for(i=0;i < numRows; i++){
        $('#orderTable tbody>tr:last').clone(true).insertAfter('#orderTable tbody>tr:last').end()
            .find("input[type=checkbox]").attr('name', "specialOrder[" +rowNum + "]").end()
            .find(".productSelect").val("").attr('name', "productInputName[" +rowNum + "]").end()
            .find(".quantityField").val("").attr('name', "quantity["+rowNum+"]");

        rowNum++;
    }

    return false;
}

我已经讨论了这个并且在我看来它应该可以工作但实际上它只是复制了除最后一行之外的所有索引号，除了特殊订单复选框，我得到索引的NaN。我已将jQuery中的名称更改为无效，因此它正确插入行但未对name属性进行任何更改。我缺少什么想法？

Answer 1

当我在你正在使用的表中使用它时，这适用于我。它添加了一个索引为301的行，然后是另一个带有302的行，另一行带有303.（我填写了一点'因为没有看到所有具有相同索引的字段困扰我。

var rowNum = 300;

$('.productSelect').change(function() {
   insertBlankRow(1);
});

function insertBlankRow(numRows){

    for(i=0;i < numRows; i++){

        $('#orderTable tbody>tr:last').clone(true).insertAfter('#orderTable tbody>tr:last').end()
        .find(".quantityField").val("").attr('name', "quantity["+rowNum+"]").end()
        .find(".quantityReturnedField").val("").attr('name', "quantityReturned["+rowNum+"]").end()
        .find(".priceField").val("").attr('name', "price["+rowNum+"]").end()
        .find(".productSelect").val("").attr('name', "productInputName["+rowNum+"]").end()
        .find("input[type=checkbox]").attr('name', "specialOrder[" +rowNum + "]");
        rowNum++;
    }

    return false;
}

在此处查看已上传的测试：http://www.davideugenepratt.com/stack-overflow-samples/add-row-to-table.html

使用jQuery在表中插入新行并增加数组计数

1 个答案: