Question

I would like to get the total sum of values having class addition1:::

HTML CODE is

<tr >
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td class="heading">Total Inr</td>
  <td align="right" class="heading"><?php if($inr!='')echo co($inr);else echo "0.00";?>     </td>
  <td>&nbsp;</td>
  <td class="heading">ROE</td>
  <td  class="heading" ><span class="addition1"><?php if($inr!='')echo co($inr);else echo "0.00";?> </span>   </td>
  <td>&nbsp;</td>
</tr>

<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td class="heading">Total Usd</td>
  <td align="right" class="heading"><?php if($usd!='')echo co($usd);else echo "0.00";?> </td>
  <td>&nbsp;</td>
  <td><input name="roe1" id="roe11" type="text" class="heading" value="1" style="width:50px" /></td>
  <td class="heading1"  style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
    <span class="addition1">
            <?php if($usd!='')echo co($usd);else echo "0.00";?>  </span>  
  </td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td class="heading">Total Gbp</td>
  <td align="right" class="heading"><?php if($gbp!='')echo co($gbp);else echo "0.00";?></td>
  <td>&nbsp;</td>
  <td><input name="roe1" id="roe12" type="text" class="heading" value="1" style="width:50px" /></td>
  <td class="heading2" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
    <span class="addition1"><?php if($gbp!='')echo co($gbp);else echo "0.00";?></span>
  </td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td class="heading">Total Eur</td>
  <td align="right" class="heading"><?php if($eur!='')echo co($eur); else echo "0.00";?></td>
  <td>&nbsp;</td>
  <td><input name="roe1" id="roe13"  type="text" class="heading" value="1" style="width:50px" /></td>
  <td  class="heading3" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
   <span class="addition1"> <?php if($eur!='')echo co($eur); else echo "0.00";?></span>
  </td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td class="heading">Total Other</td>
  <td align="right" class="heading"><?php if($other!='')echo co($other);else echo "0.00";?></td>
  <td>&nbsp;</td>
  <td><input name="roe1" id="roe14" type="text" class="heading" value="1" style="width:50px" /></td>
  <td class="heading4" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
    <span class="addition1"><?php if($other!='')echo (co($other));else echo "0.00";?>    </span>
  </td>
  <td>&nbsp;</td>
</tr>

Jquery Code is

    $(document).ready(function() {
    $('#tables tbody>tr>td>input.heading#roe13').change(function() {
        var k = $('#roe13').val(); 
         $('#tables tbody>tr>td.heading3').text(function(i,v) {
            v= v.replace(/,/g, ''),
            asANumber = +v;
            x=Math.round(parseFloat(v*k)*100) / 100;
            return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");

        });
    });


$('#tables tbody>tr>td>input.heading#roe11').change(function() {
        var k = $('#roe11').val(); 
        $('#tables tbody>tr>td.heading1').text(function(i,v) {
            v= v.replace(/,/g, ''),
            asANumber = +v;                 
            x1=Math.round(parseFloat(v*k)*100) / 100;
            return x1.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        });
    });

$('#tables tbody>tr>td>input.heading#roe12').change(function() {
        var k = $('#roe12').val(); 
        $('#tables tbody>tr>td.heading2').text(function(i,v) {
            v= v.replace(/,/g, ''),
            asANumber = +v;                 
            x2=Math.round(parseFloat(v*k)*100) / 100;
            return x2.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        });
    });

$('#tables tbody>tr>td>input.heading#roe14').change(function() {
        var k = $('#roe14').val(); 
        $('#tables tbody>tr>td.heading4').text(function(i,v) {
            v= v.replace(/,/g, ''),
            asANumber = +v;                 
            x3=Math.round(parseFloat(v*k)*100) / 100;
            return x3.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        });
    });


$('#tables tbody>tr').change(function() {
        var sum = 0;
        var regex = /\((\d+)\)/g;
        $('span.addition1').each(function() {       
            matches = $(this).text().replace(/,/g, ''); alert(matches);
            if( !isNaN( matches ) ){        
                sum += parseFloat(matches);
            }           
        });
    }); 
});

Class name in td can’t be changed . I am trying to get the sum of values having class addition1. On running this code, 1 value is getting skipped, e.g. If I change a value say x1 then result generated due to x1 will be skipped in addition.
Please help me out.

Answer 1

Arrays in jquery are 0-based if you want the first value of matches use matches[0].

Don’t put div’s directly inside tr’s. I’d recommend a span class="addition1" inside each of the td’s and only round the floats you wish add.

This way you can parsefloat() first and then perform a NaN check after, stripping out all the regex stuff:

td code:

<td>..(<span class="addition1">1,230.0</span>)..</td>

jquery loop code:

$('span.addition1').each(function() {
 var floatVal = parseFloat($(this).text().replace(/,/g,""));
 if(!isNaN(floatVal)) {        
  sum += floatVal;
 }         
});

Use $(this).text() not .val().