Question

我有一个包含不同<td>类名的表。我需要将这些中的每一个添加/相加一个总值。如果他们都有相同的类名，我可以轻松地做到这一点，但我无法想象如何使用不同的类。因此，在下面的表示例中，我需要添加.price1 + .price2 + .price3并将结果显示在#result中。

HTML：

    <table id="tableOrderTotal" class="table tableTotal">
      <tbody>
        <tr>
         <td>Item1</td>
         <td class="price1">5</td>
        </tr>
        <tr>
         <td>Item2</td>
         <td class="price2">15</td>
        </tr>
        <tr>
         <td>Item3</td>
         <td class="price3">25</td>
        </tr>         
        <tr class="summary">
         <td class="totalOrder">Total:</td>
         <td id="result" class="totalAmount"></td>
        </tr>                                 
     </tbody>
   </table>

Answer 1

尝试使用此选择器，使用通配符

$("[class^=price]")

代码是

var result=0;
$("[class^=price]").each(function(e,i){result+=parseInt(i.innerHTML)});
console.log(result) // u get to see the result in console

Answer 2

考虑到所有<td> html值都是数字，使用jQuery：

$(document).ready(function(){
  var total = 0;  
  total += $('#tableOrderTotal .price1').html();
  total += $('#tableOrderTotal .price2').html();
  total += $('#tableOrderTotal .price3').html();
  $("#result").html(total);
})

Answer 3

一个建议，更简单，是创建一个属性，一些用它，像... ...

<td class="price1" to-sum>5</td>
<td class="price2" to-sum>5</td>
<td class="price3" to-sum>5</td>

然后按属性选择。

＆＃13;

$(document).ready(function() {
    var total = 0;
    $('td[to-sum]').each(function(item) {
        total += parseFloat($(this).text());
    })

    $("#result").html(total);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
    <tbody>
        <tr>
            <td>Item1</td>
            <td class="price1" to-sum>5</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td class="price2" to-sum>15</td>
        </tr>
        <tr>
            <td>Item3</td>
            <td class="price3" to-sum>25</td>
        </tr>
        <tr class="summary">
            <td class="totalOrder">Total:</td>
            <td id="result" class="totalAmount"></td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 4

最简单的只是添加一些数据属性或类，但我认为你不能这样做。因此，这是很少有可能的解决方案，例如我们可以通过tr执行选择器并获取td中的每个tr或通过正则表达式执行选择器。这里是示例代码。

//solution with selector by tr
var sum=0;
$('tr:not(.summary)').each(function() {

   
    sum+=parseInt( $(this).find("td").last().text() );
     
});

$("td#result").text(sum);

//second possibile solution is to do regular expression selector 
//( get every element with class starting by "price")
var sum=0;
$('td[class^=price]').each(function() {

   
    sum+=parseInt( $(this).text() );
     
});
$("td#result2").text(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
      <tbody>
        <tr>
         <td>Item1</td>
         <td class="price1">5</td>
        </tr>
        <tr>
         <td>Item2</td>
         <td class="price2">15</td>
        </tr>
        <tr>
         <td>Item3</td>
         <td class="price3">25</td>
        </tr>         
        <tr class="summary">
         <td class="totalOrder">Total:</td>
         <td id="result" class="totalAmount"></td>
        </tr>    
        <tr class="summary">
         <td class="totalOrder">Total second solution:</td>
         <td id="result2" class="totalAmount"></td>
        </tr>                               
     </tbody>
   </table>

Answer 5

您可以使用以下代码段。

data.sname

基本上是在id // ..other pieces of code return ( <div id={data.sname} key={data.sname} className="nav_item"> // ..other pieces of code以<script> $(function(){ var sum = 0; $('[class^="price"]').each(function(){ sum = sum + parseInt($(this).html()); }); $('[class$="totalAmount"]').html(sum); }) </script>开头，然后将它们全部添加到td内的文本。

最后，它会将class price的{{1}}设置为之前获得的总和。

我希望，这会有所帮助。

如何使用js或jQuery从不同的div类添加值

5 个答案: