javascript - 行值越来越重复

在这里，我有表中显示的值列表，其中每一行都有复选框类型，列表看起来像这样



当我单击该行值的最后一个值时，但如果我单击第二行两次，则该行值出现；如果我单击第三行，则该行值的三倍出现

这是我的代码

<script>
 $(document).ready(function () {
   var qua=[];
   var amnt=[];
   $("#getdata").on('click',function () {
   var form_data={
                    agent_name: $('#agent_name').val(),
                    number: $('#number').val(),
                    number_from: $('#number_from').val(),
                    number_to: $('#number_to').val(),
                    quantity: $('#quantity').val(),
                    amount: $('#amount').val(),
                    date: $('#date').val(),
                    commision: $('#commision').val(),
                    profit: $('#profit').val(),
                    agent_amount: $('#agent_amount').val(),
                    user_id: $('#user_id').val(),
                    type: $("#abc_type_"+$("input[name=select_type]:checked").val()).val()
                  }
    $.ajax({
    type: 'POST',
    url: '<?php echo base_url();?>app/admin_control/ajax_data',
    data: form_data,
    dataType:"json", //to parse string into JSON object,
    success: function(data){
      var fragment = '';


   for(var i=0; i < data.json.length; i++){
     fragment += '<tr class="item-row"><td><input type="hidden" id="add_type" name="add_type[]" value="'+ data.json[i].type +'">'+ data.json[i].type +'</td><td><input type="hidden" id="add_number" name="add_number[]" value="'+ data.json[i].number +'">'+ data.json[i].number +'</td><td><input type="hidden" class="add_quantity" id="add_quantity" name="add_quantity[]" value="'+ data.json[i].quantity +'">'+ data.json[i].quantity +'</td><td><input type="hidden" class="add_amount" id="add_amount" name="add_amount[]" value="'+ data.json[i].amount +'">'+ data.json[i].amount +'</td><td><input type="checkbox" class="add_checkbox" name="add_checkbox" id="add_checkbox'+i+'" value="1" checked></td></tr>';
    }

   qua_sum = 0;num_sum = 0;txt='';
   $("#table").append(fragment);

   $(".add_checkbox").on('click',function(){
      alert();


     if($(this).is(':checked'))
    {
        qua_su=$("#total_quantity").text() == '' ? 0 : parseFloat($("#total_quantity").text());
        num_su=$("#total_amount").text() == '' ? 0 : parseFloat($("#total_amount").text());
        var q=$(this).closest('.item-row').find('.add_quantity').val();
        alert(q);
        var a=$(this).closest('.item-row').find('.add_amount').val();
        alert(a);
        qu=$('#total_quantity').text(parseInt(qua_su) + parseInt(q));
        nu=$('#total_amount').text(parseInt(num_su) + parseInt(a));
    }
    else
    {

      qua_su=$("#total_quantity").text() == '' ? 0 : parseFloat($("#total_quantity").text());
      num_su=$("#total_amount").text() == '' ? 0 : parseFloat($("#total_amount").text());
      var q=$(this).closest('.item-row').find('.add_quantity').val();
      alert(q);
      var a=$(this).closest('.item-row').find('.add_amount').val();
      alert(a);
      qu=$('#total_quantity').text(qua_su-q);
      nu=$('#total_amount').text(num_su-a);
    }


 // Then you write the output where you want :

    });

  },
    error: function(jqXHR, textStatus, errorThrown){
        alert('error: ' + textStatus + ': ' + errorThrown);
    }

});
});

 return false;

 });

希望您能清楚地理解问题。

我的数据看起来像这样

{"json":[{"agent_name":"admin","number":"212","type":"super","quantity":"33","amount":"330.00","date":"2018-02-21 15:58:57","commision":"10.00","profit":"330.00","agent_amount":"0.00","user_id":"1"}]}
{"json":[{"agent_name":"admin","number":"444","type":"super","quantity":"44","amount":"440.00","date":"2018-02-21 15:58:57","commision":"10.00","profit":"440.00","agent_amount":"0.00","user_id":"1"}]}
{"json":[{"agent_name":"admin","number":"444","type":"super","quantity":"44","amount":"440.00","date":"2018-02-21 15:58:57","commision":"10.00","profit":"440.00","agent_amount":"0.00","user_id":"1"}]}

最佳答案

$(function() {
  var data = {
      json: [
          {type: 'super', number: '100', quantity: 10, amount: 100.00},
          {type: 'super', number: '200', quantity: 20, amount: 200.00},
          {type: 'super', number: '300', quantity: 30, amount: 300.00}
      ]
  };

  var fragment = '';
  for(var i=0; i < data.json.length; i++){
      fragment += '<tr class="item-row"><td><input type="hidden" id="add_type" name="add_type[]" value="'+ data.json[i].type +'">'+ data.json[i].type +'</td><td><input type="hidden" id="add_number" name="add_number[]" value="'+ data.json[i].number +'">'+ data.json[i].number +'</td><td><input type="hidden" class="add_quantity" id="add_quantity" name="add_quantity[]" value="'+ data.json[i].quantity +'">'+ data.json[i].quantity +'</td><td><input type="hidden" class="add_amount" id="add_amount" name="add_amount[]" value="'+ data.json[i].amount +'">'+ data.json[i].amount +'</td><td><input type="checkbox" class="add_checkbox" name="add_checkbox" id="add_checkbox'+i+'" value="1" checked></td></tr>';
  }

  $('#table').html(fragment);

  $(".add_checkbox").on('click',function(){
     var checkbox_list = $(".add_checkbox"); // select all your checkbox elt

     // You put your sum to 0 (or if you have an other value from an other place than your table, init them with this value
     var qua_su = 0;
     var num_su = 0;

     // You loop through all you checkbox to see if they are check or not
     $.each(checkbox_list, function() {
         if ($(this).is(':checked')) {
             qua_su += parseInt($(this).parent().parent().find('.add_quantity').val()) ;
             num_su += parseInt($(this).parent().parent().find('.add_amount').val()) ;
         }
     });

     // Then you write the output where you want :
     $('#total_quantity').html(qua_su);
     $('#total_amount').html(num_su);

   });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="table">
</table>

<p>Total Quantity: <span id="total_quantity">60</span></p>
<p>Total Amount: <span id="total_amount">600</span></p>

首先，循环并创建具有相同ID的行，因此在每个ID之后，添加i值以具有唯一ID：

// every time you have an id, do :
... + id="yourIDname_" + i + ...

EG：

for(var i=0; i < data.json.length; i++){
    fragment += '... id="add_type_"' + i + '....
}

这样，您将为每一行拥有唯一的ID。

然后尝试这样：

// Trigger every time a checkbox is click
$(".add_checkbox").on('click',function(){
     var checkbox_list = $(".add_checkbox"); // select all your checkbox elt

     // You put your sum to 0 (or if you have an other value from an other place than your table, init them with this value
     var qua_su = 0;
     var num_su = 0;

     // You loop through all you checkbox to see if they are check or not
     $.each(checkbox_list, function() {
         if ($(this).is('checked') {
             // you get the value of your row and added it to your sum
             qua_su += // the value
             num_su += // the value
         }
     }

     // Then you write the output where you want :
     $('#total_quantity').html(qua_su);
     $('#total_amount').html(num_su);
});

是您要找的东西吗？

关于javascript - 行值越来越重复，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48902786/