javascript - 计算每列的总计

问题描述

这里有人可以帮我吗？此代码的问题在于，当您添加列（添加供应商）时，它无法获得每个总计列的总计。这里有人知道如何解决这个问题吗？这将对我的项目有很大帮助。提前致谢。这是我的 javascript 计算总数（不是总数）

$(function() {
  $('#add_supplier').click(function() {
    $('#supplier_table > thead > tr#first-header').append('<th colspan="2" class="supplier_name">Supplier</th>');

    $('#supplier_table > thead > tr#second-header').append(
      '<th>Price</th>' +
      '<th>Total</th>'
    );

    $('#supplier_table > tbody > tr').append(
      '<td><input type="text" class="form-control price text-right" ></td>' +
      '<td><input type="text" class="form-control total text-right" readonly></td>'
    );

    $('#grandtotal > tbody > tr').append(
      '<td><input class="form-control" disabled></td>' +
      '<td><input type="text" class="form-control grandtotal text-right" readonly=""></td>'
    );

    refresh_index();
  });

  $('#add_item').click(function() {
    $('#supplier_table tbody').append($("#supplier_table tbody tr:last").clone());
    refresh_index();
  });

  function refresh_index() {
    $('.price').each(function(i) {
      i++;
      $(this).attr('id', 'price-' + i);
      $(this).attr('data-num', i);
      event_handler();
    });

    $('.total').each(function(i) {
      i++;
      $(this).attr('id', 'total-' + i);
    });

    $('.qty').each(function(i) {
      i++;
      $(this).attr('id', 'qty-' + i);
    });

    $('.grandtotal').each(function(i) {
      i++;
      $(this).attr('id', 'grandtotal-' + i);
    });

    $('.supplier_name').each(function(i) {
      i++;
      $(this).attr('id', 'supplier_name-' + i);
    });
  }
  refresh_index();

  function event_handler() {
    $('.price').unbind('keyup').bind('keyup', function() {
      var id = this.id;
      var num = id.split('-');
      var pos = $(this).closest('tr').index() + 1;
      var qty = $('#qty-' + pos).val();
      var price = $(this).val();
      var total = parseFloat(qty) * parseFloat(price);

      if (isNaN(total)) {
        var total = 0;
      }

      $('#total-' + num[1]).val(total);

      var num_of_supplier_name = $('.supplier_name').length;
      sum_of_total(num_of_supplier_name);
    });
  }

  function sum_of_total(num) {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".total").each(function() {
      //add only if the value is number
      if (!isNaN($(this).val()) && $(this).val().length != 0) {
        sum += parseFloat(this.value);
      }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#grandtotal-" + num).val(sum);
  }
});

#supplier_table thead th,
td {
  text-align: center;
}

#grandtotal tbody input:disabled {
  border: none;
  border-color: transparent;
  background-color: transparent;
  outline: none;
  box-shadow: inset 0px 0px 0px 0px red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>
  <button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
  <button type="button" class="btn btn-default" id="add_item">Add Item</button>
  <table class="table table-bordered" id="supplier_table">
    <thead>
      <tr id="first-header">
        <th></th>
        <th></th>
        <th colspan="2" class="supplier_name" id="supplier_name-1">Supplier</th>
      </tr>
      <tr id="second-header">
        <th>Item</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr class="tbody-tr">
        <td><input type="text" class="form-control" value="Mouse" readonly=""></td>
        <td><input type="text" class="form-control qty" value="10" readonly=""></td>
        <td><input type="text" class="form-control price"></td>
        <td><input type="text" class="form-control total for_sum-1" readonly=""></td>
      </tr>
      <tr class="tbody-tr">
        <td><input type="text" class="form-control" value="Keyboard" readonly=""></td>
        <td><input type="text" class="form-control qty" value="20" readonly=""></td>
        <td><input type="text" class="form-control price"></td>
        <td><input type="text" class="form-control total for_sum-1" readonly=""></td>
      </tr>
      <tr class="tbody-tr">
        <td><input type="text" class="form-control" value="Monitor" readonly=""></td>
        <td><input type="text" class="form-control qty" value="30" readonly=""></td>
        <td><input type="text" class="form-control price"></td>
        <td><input type="text" class="form-control total for_sum-1" readonly=""></td>
      </tr>
    </tbody>
    <table class="table table-bordered" id="grandtotal">
      <thead>
        <tr>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" disabled=""></td>
          <td><input class="form-control" disabled=""></td>
          <td><input class="form-control" disabled value="Grand Total : " style="text-align: right;"></td>
          <td><input type="text" class="form-control grandtotal text-right" readonly=""></td>
        </tr>
      </tbody>
    </table>
  </table>
</div>

演示jsFiddle

标签： javascriptjquery

javascript - 计算每列的总计

问题描述

解决方案

推荐阅读