在行和列中动态添加值总和

Question

使用此代码，我现在已经可以在行中计算两个值了，我正在尝试将本地列字段下的列值求和与此所有的列值，

            <table  class="table order-list turf" id="turf">
            <tr>
                <td>Items</td>
                <td>Local</td>
                <td>Foreign</td>
                <td>Total</td>
            </tr>
            <tr>
          <td class="col-sm-3"><input type="text" name="" value="item1"></td>
<td class="col-sm-3 calculated_value">
<input type="text" name="value1[]" class="calculated_value"/></td>
<td class="col-sm-3 calculated_value">
 <input type="text" name="value2[]"  class="form-control  calculated_value" />
                </td>
                <td class="col-sm-3 total">
                    <input type="text" name="total[]"  class="form-control total" id="total" readonly="" />
                </td>
                <td class="col-sm-2"><a class="deleteRow"></a>
    <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" />
    </td>
            </tr>
              <tr class="grand-total persist">
                <td>Total Investment</td>
            <td id="local_total"><input type="text"  readonly="" name=""></td>
         <td id="foreign_total"><input type="text"   readonly="" name=""></td>
           <td id="total_total"><input type="text"  readonly="" name=""></td>
            </tr>
    </table>

var counter = 1;
  $("body").on("input", ".calculated_value", function() {   
     var parent_row = $(this).closest('tr');
        var totalincome = 0;
        parent_row.find('.calculated_value').each(function() {
          totalincome += parseInt($(this).val() || 0);
        });
        parent_row.find(".total").val(totalincome);

Demo

Answer 1

我希望这是您所需要的。代码可以重构，但我认为您可以自己完成。

$(document).ready(function() {
  var counter = 1;

  $("body").on("input", ".calculated_value", function() {
    calculate(this);
  });

  function calculate(elm) {
    var parent_row = $(elm).closest('tr');
    var elTotalIncome = $("#local_milion_grand_total").find("input");
    var elTotalForeign = $("#foreign_milion_grand_total").find("input");
    var elTotal = $('#total_milion_grand_total').find("input");

    var totalincome = 0;
    var totalLocal = 0;
    var totalForeign = 0;
    var total = 0;

    parent_row.find('.calculated_value').each(function() {
      totalincome += parseInt($(this).val() || 0);
    });

    parent_row.find('.total').val(totalincome);


    for (i = 0; i < $("tbody tr").length; i++) {
      let elCol = $($("tbody tr")[i]).find("td input");
      let tmp = parseInt(elCol[1].value);
      let tmp2 = parseInt(elCol[2].value);
      let tmp3 = parseInt(elCol[3].value);

      if (isNaN(tmp)) tmp = 0;
      if (isNaN(tmp2)) tmp2 = 0;
      if (isNaN(tmp3)) tmp3 = 0;

      totalLocal += tmp;
      totalForeign += tmp2;
      total += tmp3;
    }

    elTotal.val(total);
    elTotalIncome.val(totalLocal);
    elTotalForeign.val(totalForeign);

  }


  //add new row button
  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" value="Item ' + counter + '"></td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
    cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
    cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });

  $("table.order-list").on("click", ".ibtnDel", function(event) {
    if (counter == 1) return;
    $(this).closest("tr").remove();
    counter -= 1
    calculate(this);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table order-list turf" id="turf">
  <thead>
    <tr>
      <td>Items</td>
      <td>Local(Milion Taka/Milion US$)</td>
      <td>Foreign(Milion Taka/Milion US$)</td>
      <td>Total(Milion Taka/Milion US$)</td>
      <td> <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" /></td>
    </tr>

  </thead>
  <tbody>
    <tr>
      <td class="col-sm-3">
        <input type="text" name="" value="item1">
      </td>

      <td class="col-sm-3 calculated_value">
        <input type="text" name="value1[]" class="form-control calculated_value_row calculated_value" />

      </td>
      <td class="col-sm-3 calculated_value">
        <input type="text" name="value2[]" class="form-control calculated_value_row calculated_value" />
      </td>
      <td class="col-sm-3 total">
        <input type="text" name="total[]" class="form-control total" id="total" readonly="" />
      </td>
      <td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>
    </tr>

  </tbody>
  <tfoot>
    <tr class="grand-total persist">
      <td>Total Investment</td>
      <td id="local_milion_grand_total"><input type="text" class="form-control local_milion_grand_total" readonly="" name=""></td>
      <td id="foreign_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
      <td id="total_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td>
    </tr>
  </tfoot>
</table>