使用jquery从动态内部文本中得到的数字总和

Question

我想获得具有class addition1 :::

的值的总和

HTML CODE是

<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是

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

td中的类名不能更改。我试图获得具有class addition1的值的总和。在运行此代码时，将跳过1个值，例如如果我改变一个值x1，那么由于x1而产生的结果将被跳过。 请帮帮我。

Answer 1

如果您希望匹配的第一个值使用matches[0]，则jquery中的数组是从0开始的。

不要将div直接放在tr中。我建议在每个td中使用span class="addition1"并且只围绕你想要添加的花车。

这样你可以先parsefloat()然后执行NaN检查，删除所有正则表达式的东西：

代码：

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

jquery循环代码：

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

使用$(this).text()而非.val()。

Answer 2

$（this）.val（）引用div.addition1的值，该值没有值。

您正在尝试将td嵌套在不允许的div中。如果您不能编辑TD以给他们一个课程，您将不得不使用其他方式来选择它们，例如每八个TD或类似的东西。

Answer 3

HTML：

<tr >
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td class="heading">Total Inr</td>
  <td align="right" class="heading"><?php echo $inr!=''?co($inr):"0.00";?>     </td>
  <td>&nbsp;</td>
  <td class="heading">ROE</td><div class="addition1">
  <td  class="heading" ><?php echo $inr!=''?co($inr):"0.00";?>    </td></div>
  <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 echo $usd!=''?co($usd):"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;">
    <?php echo $usd!=''?co($usd):"0.00";?>    
  </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 echo $gbp!=''?co($gbp):"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;">
    <?php echo $gbp!=''?co($gbp):"0.00";?>
  </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 echo $eur!=''?co($eur):"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;">
    <?php echo $eur!=''?co($eur):"0.00";?>
  </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 echo $other!=''?co($other):"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;">
    <?php echo $other!=''?co($other):"0.00";?>    
  </td>
  <td>&nbsp;</td>
</tr>

脚本：

$('table tr').change(function() {
    var sum = 0;
    $.each($('tr td input'), function() {
        var nextCol = $(this).parent().next("td").text();
        if( nextCol && ! isNaN( nextCol ) ){        
            sum += parseFloat(nextCol, 10);
        }         
    });
    alert(sum);
});

Just Addition：

$('table tr').change(function() {
    var sum = 0;
    $.each($('addition1'), function() {
        var nextCol = $(this).text();
        if( nextCol && ! isNaN( nextCol ) ){        
            sum += parseFloat(nextCol, 10);
        }         
    });
    alert(sum);
});