html - 如何添加动态值并将其附加到一个字段中？

Question

表单，它正在获取服务名称，<td>Name</td>下面的 jQuery 将sub total作为quantity相对于price.

$(document).on('change', '.qty', function() {
  var quantity = $(this).val();
  var sub = $(this).parent().next().children();
  var price = $(this).parent().prev().children().val();
  var subTotal = parseInt(quantity) * parseInt(price);
  sub.val(subTotal);
});



var i = 1;
$(function() {
  $("#btnAdd").bind("click", function() {
    var div = $("<tr />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
  });
  $("body").on("click", ".remove", function() {
    $(this).closest("tr").remove();
    // GrandTotal();
  });
});


function GetDynamicTextBox(value) {
  i++;

  return '<td><select class="form-control select2 select-service" style="width: 100%;" id="service-select' + i + '" required  name="product[]"><option value="">--Select Product--</option> <?php foreach($dbf->fetchOrder("service") as $services){?><option value="<?= $services['
  id '];?>"><?= $services['
  service '];?></option><?php }?></select></td>' +
    '<td><input class="form-control rate" name = "rate[]" type="text" placeholder="Rate" id="rate1' + i + '" required readonly/></td>' +
    '<td><input class="form-control qty" placeholder="Quantity" name = "qty[]" type="number" id="qty1' + i + '" /></td>' +
    '<td><input class="form-control sub-total" placeholder="Sub Total" name = "sub_total[]" type="text"  id="sub_total1' + i + '" readonly required/></td>' +


    '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-bordered">
  <thead>
    <tr>
      <td>Name</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Sub Total</td>
      <td><button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp; Add&nbsp;</button></td>
    </tr>
  </thead>
  <tbody id="TextBoxContainer">
    <tr>
      <td>
        <select class="form-control select-service" style="width: 100%;" id="service-select" required name="service[]">
          <option value="">--Select Services--</option>
          <?php foreach($dbf->fetchOrder("service") as $services){?>
          <option value="<?= $services['id'];?>">
            <?= $services['service'];?>
          </option>
          <?php }?>
        </select>
      </td>
      <td><input type="text" class="form-control rate" placeholder="Rate" readonly name="rate[]" id="rate1" required></td>
      <td><input type="number" min="1" class="form-control qty" placeholder="Quantity" name="qty[]" id="qty1"></td>
      <td><input type="text" min="1" class="form-control sub_total" placeholder="Sub Total" name="sub_total[]" readonly id="sub_total1"></td>
      <td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
    </tr>
  </tbody>
  <tfoot>

  </tfoot>
</table>

这是上面同一个表单的多个动态输入字段，在点击添加按钮时添加Name, Price, Quantity,动态字段。Sub Total

我的目标是从多个动态字段中添加所有小计并将其显示在不同的字段中。

标签： htmljquery

Answer 1

您可以使用each循环遍历所有输入，即：sub_total然后获取输入值并将其添加到每次迭代的某个变量中，最后将其附加到某个元素。

演示代码：

$(document).on('change', '.qty', function() {
  var quantity = $(this).val();
  var sub = $(this).parent().next().children();
  var price = $(this).parent().prev().children().val()
  var subTotal = parseInt(quantity) * parseInt(price);
  sub.val(subTotal);
  calculate_total(); //call to calculate
});



var i = 1;
$(function() {
  $("#btnAdd").bind("click", function() {
    var div = $("<tr />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
  });
  $("body").on("click", ".remove", function() {
    $(this).closest("tr").remove();
    calculate_total(); //call to calculate
  });
});


function GetDynamicTextBox(value) {
  i++;
  return '<td><select class="form-control select2 select-service" style="width: 100%;" id="service-select' + i + '" required  name="product[]"><option value="">--Select Product--</option></select></td>' + '<td><input class="form-control rate" value="10" name = "rate[]" type="text" placeholder="Rate" id="rate1' + i + '" required readonly/></td>' + '<td><input class="form-control qty" placeholder="Quantity" name = "qty[]" type="number" id="qty1' + i + '" /></td>' + '<td><input class="form-control sub_total" placeholder="Sub Total" name = "sub_total[]" type="text"  id="sub_total1' + i + '" readonly required/></td>' + '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign">x</i></button></td>'
}

function calculate_total() {
  var total = 0;
  //loop through all inputs(sub-total)
  $("input.sub_total").each(function() {
    //check if value is not null
    total += ($(this).val() != "") ? parseInt($(this).val()) : 0;
  })
  //add total 
  $("#total").text(total)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-bordered">
  <thead>
    <tr>
      <td>Name</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Sub Total</td>
      <td><button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp; Add&nbsp;</button></td>
    </tr>
  </thead>
  <tbody id="TextBoxContainer">
    <tr>
      <td>
        <select class="form-control select-service" style="width: 100%;" id="service-select" required name="service[]">
          <option value="">--Select Services--</option>
          <option value="1">1 </option>
          <option value="2">2 </option>
          <option value="3">3 </option>
        </select>
      </td>
      <td><input type="text" class="form-control rate" placeholder="Rate" readonly name="rate[]" value="10" id="rate1" required></td>
      <td><input type="number" min="1" class="form-control qty" placeholder="Quantity" name="qty[]" id="qty1"></td>
      <td><input type="text" min="1" class="form-control sub_total" placeholder="Sub Total" name="sub_total[]" readonly id="sub_total1"></td>
      <td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign">x</i></button></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">Total : </th>
      <th id="total">0</th>
    </tr>
  </tfoot>
</table>