動態行未自動計算

Question

我正在使用數據庫中的自動填充值動態添加行。 添加后，必須計算總數。 現在，它僅計算第一行的總數。 從第二行開始，它沒有計算任何內容。 而且總體上沒有發生。

這是我的代碼

html表格

<table class="table table-bordered">
  <tr>
    <th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
    <th>No</th>
    <th>Item ID</th>
    <th>Description</th>
    <th>UOM</th>
    <th>Price</th>
    <th>Tax</th>
    <th>Quantity</th>
    <th>Discount</th>
    <th>Amount</th>

  </tr>

  <tr>
    <td><input type='checkbox' class='case' /></td>
    <td><span id='snum'>1.</span></td>
    <td><input type="text" class="form-control" id="productcode_1" name="productcode[]"></td>
    <td><input type="text" class="form-control" id="description_1" name="description[]"></td>
    <td><input type="text" class="form-control" id="uom_1" name="uom[]"></td>
    <td><input type="text" class="form-control price" id="price_1" name="price[]"></td>
    <td><input type="text" class="form-control tax" id="tax_1" name="tax[]"></td>
    <td><input type="text" class="form-control quantity" id="quantity_1" name="quantity[]"></td>
    <td><input type="text" class="form-control discount" id="discount_1" name="discount[]"></td>
    <td><input type="text" class="form-control amount" id="amount_1" name="amount[]"></td>
    <td><button type="button" class='btn btn-danger delete'>-</button></td>
    <td><button type="button" class='btn btn-success addmore'>+ </button></td>
  </tr>

  <tfoot>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th style="text-align:center;" class="total">0<b></b></th>
  </tfoot>

</table>

JavaScript的

$(".delete").on('click', function() {
  $('.case:checkbox:checked').parents("tr").remove();
  $('.check_all').prop("checked", false);
  check();
});
var i = $('table tr').length - 1;


$(".addmore").on('click', function() {
      count = $('table tr').length - 1;

      var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td>";
      data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control' type='text' id='price_" + i + "' name='price[]'/></td><td><input class='form-control' type='text' id='tax_" + i + "' name='tax[]'/></td><td><input class='form-control' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control' type='text' id='amount_" + i + "' name='amount[]'/></td></tr>";
      $('table').append(data);
      row = i;

      $('#productcode_' + i).autocomplete({
          source: function(request, response) {
            $.ajax({
              url: 'ajax.php',
              dataType: "json",
              method: 'post',
              data: {
                name_startsWith: request.term,
                type: 'items_table',
                row_num: row

              },

              success: function(data) {
                response($.map(data, function(item) {
                  var code = item.split("|");

                  return {
                    label: code[0],
                    value: code[0],
                    data: item

                  }
                }));
              }
            });
          },

          autoFocus: true,
          minLength: 0,
          select: function(event, ui) {
            var names = ui.item.data.split("|");
            id_arr = $(this).attr('id');
            id = id_arr.split("_            
              $('#description_' + id[1]).val(names[1]); $('#uom_' + id[1]).val(names[2]); $('#price_' + id[1]).val(names[3]); $('#tax' + id[1]).val(names[4]);
            }
          });


        i++;


      });

    function select_all() {
      $('input[class=case]:checkbox').each(function() {
        if ($('input[class=check_all]:checkbox:checked').length == 0) {
          $(this).prop("checked", false);
        } else {
          $(this).prop("checked", true);
        }
      });
    }
    $('body').delegate('.quantity,.price,.discount,.tax', 'keyup', function() {
        var tr = $(this).parent().parent();
        var qty = tr.find('.quantity').valr price = tr.find('.price').val tax = tr.find('.tax').val
        var dis = tr.find('.discount').valr amt = (qty * price) - (qty * price * dis) / 100;
        var tax1 = (amt) * (tax / 100);
        tr.find('.amount').val(tax1al();
        });

      function total() {
        var t = 0;
        $('.amount').each(function(i, e) {
          var amt = $(this).val() - 0;
          t += tax1;
        });
        $('.total').html(t);
      }

      function check() {
        obj = $('table tr').find('span');
        $.each(obj, function(key, value) {
          id = value.id;
          $('#' + id).html(key + 1);
        });
      }

      $('#productcode_1').autocomplete({
        source: function(request, response) {
          $.ajax({
            url: 'ajax.php',
            dataType: "json",
            method: 'post',
            data: {
              name_startsWith: request.term,
              type: 'items_table',
              row_num: 1
            },
            success: function(data) {
              response($.map(data, function(item) {
                var code = item.split("|");
                return {
                  label: code[0],
                  value: code[0],
                  data: item
                }
              }));
            }
          });
        },
        autoFocus: true,
        minLength: 0,
        select: function(event, ui) {
          var names = ui.item.data.split("|");
          $('#description_1').val(names[1]);
          $('#uom_1').val(names[2]);
          $('#price_1').val(names[3]);
          $('#tax_1').val(names[4]);
        }
      });

ajax.php

<?php
require_once '../connect.php';
if($_POST['type'] == 'items_table'){
    $row_num = $_POST['row_num'];
    $name = $_POST['name_startsWith'];
    $query = "SELECT items.iid, items.description, items.uom, items.selling_price, items.tax_id, taxes.tax_id, taxes.name, taxes.rate FROM items INNER JOIN taxes ON items.tax_id=taxes.tax_id where items.iid LIKE '".strtoupper($name)."%'";
    $result = mysqli_query($con, $query);
    $data = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $name = $row['iid'].'|'.$row['description'].'|'.$row['uom'].'|'.$row['selling_price'].'|'.$row['rate'].'|'.$row_num;

        array_push($data, $name);    
    }    
    echo json_encode($data);
}
?> 

僅計算第一行。 沒有得到什么錯

Answer 1

我解決了。由於我使用過的課程

  $('body').on('change', '.quantity,.price,.discount,.tax', function() {
    var tr = $(this).parent().parent();
    var qty = tr.find('.quantity').val();
    var price = tr.find('.price').val();
    var tax = tr.find('.tax').val();
    var dis = tr.find('.discount').val();

    var amt = (qty * price) - (qty * price * dis) / 100;

    var tax1 = (amt * (tax / 100));
    //alert(tax1);
    tr.find('.tamount').val(tax1);
    ttotal();
    tr.find('.amount').val(amt);
    total();
  });

  function total() {
    var t = 0;
    $('.amount').each(function(i, e) {
      var amt = $(this).val() - 0;
      t += amt;
    });
    $('.total').html(t);
  }
  function ttotal() {
    var tt = 0;
    $('.tamount').each(function(i, e) {
      var tax = $(this).val() - 0;
      tt += tax;
    });
    $('.ttotal').html(tt);
  }

  function check() {
    obj = $('table tr').find('span');
    $.each(obj, function(key, value) {
      id = value.id;
      $('#' + id).html(key + 1);
    });
  }