如何使用td id Jquery对所有表行td(TotalPrice)求和

时间:2015-11-13 23:01:52

标签: javascript jquery

我正在向表中添加值,如: 项目,数量,价格,TotalPrice

现在有多行:我如何总结TotalPrice以使用Jquery获取GrandTotal。

代码:

$("#Product").append(" <tr><td id='clientname'>" +ClientName+ "</td> <td id='item'>"+ItemName+"</td> <td id='quantity'>"+Quantity+"</td> <td id='price'>"+Price+"</td> <td id='totalprice'>"+TotalPrice+"</td> <td> <a  onClick='deleteRow(this);'>Delete</a> </td> </tr>");

当我插入新的行数据时,它可以在文本框/标签中显示总计,例如:

 function TotalPriceCalc()
 {
 var lblTotalPrice = document.getElementById('lblTotalPrice');
 lblTotalPrice.value = sum; 
 }

4 个答案:

答案 0 :(得分:1)

使用class=代替id=。因为 ID必须是唯一的。您需要遍历每一行并找到totalPrice

$(document).ready(function(){
    var TotalValue = 0;
    $("#Product tr").each(function(){
          TotalValue += parseFloat($(this).find('.totalprice').text());
    });
    alert(TotalValue);
});

当你标记Jquery时..这是一个Jquery解决方案所以请务必包含Jquery

答案 1 :(得分:1)

您应该使用类而不是ID来命名重复的元素。所以它应该是:

...<td class="totalprice">'+TotalPrice+'</td>...

然后你可以做

function TotalPriceCalc() {
    var total = 0;
    $(".totalprice").each(function() {
        total += parseFloat($(this).text());
    });
    $("#lblTotalPrice").val(total);
}

答案 2 :(得分:1)

这是一个将您提供的列索引相加的示例。

&#13;
&#13;
jQuery(document).ready(function() {

    $('#uploader').change(function(){

        $(".result").html('');

        $(".result").html('wait..');

        $("#uploader").ajaxForm({
            target: '.result',
            success: function() 
            {
                $('.result').hide().slideDown('fast');
                $('#uploader')[0].reset();
            },

        });

    });

});
&#13;
$(function() {
  $("#subtotal").html(sumColumn(4));
  $("#total").html(sumColumn(5));
});

function sumColumn(index) {
  var total = 0;
  $("td:nth-child(" + index + ")").each(function() {
    total += parseInt($(this).text(), 10) || 0;
  });  
  return total;
}
&#13;
&#13;
&#13;

答案 3 :(得分:0)

看看,这是我们的桌子

<table class="table table-bordered">
    <thead>
        <tr>
            <th>1</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td id="loop">50</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="loop">60</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="loop">70</td>
        </tr>
    </tbody>
    <tbody>
      <tr>
         <td class="text-right">Total</td>
        <td></td>
     </tr>
  </tbody>

这是具有价格总和的循环

          $(function() {
        
            var TotalValue = 0;

            $("tr #loop").each(function(index,value){
                currentRow = parseFloat($(this).text());
                TotalValue += currentRow
            });
            
            console.log(TotalValue);

        });