JS: Sum column values and updating result on change

Question

I have a table where, for each row, I must show the sum of two columns and present it in a third one. The sum must be calculated everytime any of the inputs change.

Each row has an unique id.
Each column input field has it's own name (altough the name repeats for each row)

This is the structure of the table with sample data:


    
        Element Name ABC
        
            
            
                 
            
            
        
            
            
                 
             
             
         
        
            
            
            
            
            
        
    //Begining second row    
    
        Element Name XYZ

I'm starting to study Javascript but this goes beyond I know at the moment. So far I tried something I saw online but no luck. If you have a better proposal feel free to post it. I'll try to understand it and put it in practice.

JS:

    $(function calc(id) {
        var row = id.parentNode.parentNode;
        var validos = row.cells[6].getElementsByTagName('input')[0].value;
        var cortesia = row.cells[7].getElementsByTagName('input')[0].value;

        resultado = parseFloat(validos) + parseFloat(cortesia);

        row.cells[10].getElementsByTagName('input')[0].value = resultado;
    });

Thanks in advance for any suggestion.

Dabbas · Accepted Answer

You can use this code. Add for each input (which the value gonna be taken from) this class for example: toBeCalced, and for each input which the total will be showed in, this class for example total.
In JS we gonna use JQuery to listen to change event, and do these steps:

go to parent row.
iterate over each children with class toBeCalced and add its value to total variable.
Get the total input by class name total and set the total value.

We get this result:

$(document).ready(function() {
    $('.toBeCalced').change(function() {
      var row = $(this).closest('tr');
      var valuesToSum = row.find('.toBeCalced');
      var total = 0;
      $.each(valuesToSum, function(index, item) {
        total += parseInt($(item).val());
      });

      var totalInput = row.find('.total')[0];
      $(totalInput).val(total);
    });
  });



  //Begining second row    
  

  
      Element Name ABC
      
          
          
               
          
          
      
      
          
          
               
           
           
       
      
          
          
          
          
          
      
  

      Element Name XYZ

JS: Sum column values and updating result on change

Answers (1)

Related Questions