行值重复

时间：2018-02-21 09:51:26

标签： javascript jquery

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

enter image description here

当我点击行值得到的最后一行但是如果我点击第二行两次行值出现，如果我去第三行，则该行值的三倍即将到来

这是我的代码

<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"}]}

2 个答案:

答案 0 :(得分：2)

＆＃13;
＆＃13; 
$(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);
     
   });

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

首先，循环并创建具有相同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);
});

这是你在找什么？

答案 1 :(得分：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(){
      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();
          var a=$(this).closest('.item-row').find('.add_amount').val();
          $('#total_quantity').text(parseInt(qua_su) + parseInt(q));
          $('#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();
          var a=$(this).closest('.item-row').find('.add_amount').val();
          $('#total_quantity').text(qua_su-q);
          $('#total_amount').text(num_su-a);
      }
  });
});
<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>

相关问题
最新问题