如何总结jquery中具有相同类的td值

Question

<tr role="row" class="odd">
   <td class=" stock-log-opening open ">0 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
</tr>
<tr role="row" class="odd">
   <td class=" stock-log-opening open ">500 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
</tr>
<tr role="row" class="odd">     
   <td class=" stock-log-opening open ">600 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
</tr>

这里我想使用jquery添加具有相同类的td的值。 我尝试使用forloop和hasclass它不工作。 这里的班级名称是开放的

我该如何解决？

Answer 1

下面应该做

var total =0;
$("td.open").each(function(){
   total += parseInt($(this).text());
})
console.log(total);

Answer 2

您可以使用.each

根据user9263373的建议，使用parseFloat解析小数值的文本。

$(document).ready(function() {

  var total = 0

  $(".open").each(function() {
    var text = parseFloat($(this).text());
    total += text;
  });

  console.log("Total is " + total);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tr role="row" class="odd">

    <td class=" stock-log-opening open ">0 PCS</td>
    <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
    <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>

  </tr>
  <tr role="row" class="odd">

    <td class=" stock-log-opening open ">500 PCS</td>
    <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
    <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
  </tr>
  <tr role="row" class="odd">

    <td class=" stock-log-opening open ">600 PCS</td>
    <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
    <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>

  </tr>
</table>

Answer 3

尝试以下方法：

var sum = 0;
$('tr td.open').each(function(){
  sum += parseInt($(this).text());
});
console.log('Total: ' + sum + ' PCS');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr role="row" class="odd">

   <td class=" stock-log-opening open ">0 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>

</tr>
<tr role="row" class="odd">

   <td class=" stock-log-opening open ">500 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
      </tr>
<tr role="row" class="odd">

   <td class=" stock-log-opening open ">600 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>

</tr>
</table>

Answer 4

您可以迭代.open类并解析整数值以获得总数：

＆＃13;

＆＃13;

$(document).ready(function(){
  var sum = 0;
  $('.open').each(function(index){
    var value = $(this).text().split(' ')[0];
    var parsedValue = parseInt(value);
    sum += parsedValue;
  });
  
  console.log('Total PCS: '+ sum);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
<tr role="row" class="odd">

   <td class=" stock-log-opening open ">0 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>

</tr>
<tr role="row" class="odd">

   <td class=" stock-log-opening open ">500 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
      </tr>
<tr role="row" class="odd">

   <td class=" stock-log-opening open ">600 PCS</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>
   <td class=" stock-log-opening"><i class="fa fa-rupee"></i> 0.00</td>

</tr>
</table>

＆＃13;

＆＃13;

＆＃13;