使用jquery获取表中所有行的总和

Question

我有表格数据。我需要通过对该表中Total的所有行求和来显示表总和RowTotal column。但是在我的循环中它仅占用第一行而不包括第二行。 Html代码：

<table class="view_job cust_view_job table-striped table text-center" style="width: 100%;border:1px solid #ccc">
    <thead>
        <tr style="background:#2b2e76" ;="">
            <th colspan="3" style="padding: 0;">
                <p style="color:white">
                   Bundle Two
                </p>
            </th>

            <th><p style="color:white" class="BundleB773423" id="B7734">Total : <span class="BundelRowTotalB7734">200</span></p></th>

        </tr>
        <tr>
            <th style="width:5%;text-align: center">Qty</th>
            <th style="width:5%;text-align: center">Days</th>
            <th style="width:10%;text-align: center">Rate</th>
            <th style="width:10%;text-align: center">Row Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>


            <td>
                <input type="text" value="1" readonly="" autocomplete="off" name="qty[]" placeholder="Qty" class="form-control Qty">
            </td>
            <td>
                <input type="text" value="2" autocomplete="off" name="days[]" placeholder="Days" class="form-control Days">
            </td>
            <td>
                <input type="text" value="100.00" autocomplete="off" id="rate_23" name="rate[]" placeholder="Rate" class="form-control rate">
            </td>
            <td>
                <input type="text" value="200.00" autocomplete="off" readonly="" name="row_total[]" id="row_totalB773423" placeholder="Row Total" class="form-control rowTotal">
            </td>
            </tr>
            <tr>


                <td>
                    <input type="text" value="1" readonly="" autocomplete="off" name="qty[]" placeholder="Qty" class="form-control Qty">
                </td>
                <td>
                    <input type="text" value="1" autocomplete="off" name="days[]" placeholder="Days" class="form-control Days">
                </td>
                <td>
                    <input type="text" value="200.00" autocomplete="off" id="rate_24" name="rate[]" placeholder="Rate" class="form-control rate">
                </td>
                <td>
                    <input type="text" value="200.00" autocomplete="off" readonly="" name="row_total[]" id="row_totalB773424" placeholder="Row Total" class="form-control rowTotal">
                </td>
                </tr>
            </tbody>
        </table>

Jquery代码：

var calcObject = {
  run: function () {

    var id = ''; 
    var sum =bundleSum=qtyVal=daysVal=rateVal=rowtotal =calcVat=daysvalue=ratevalue=FinalRow=Bsum=0;

    $(".Qty").each(function () {
      //add only if the value is number
      if (!isNaN(this.value) && this.value.length != 0) {
        qtyVal =  parseFloat(this.value);
      }
        daysVal =  $(this).closest('tr').find("td:eq(1) input[type='text']").val();
        if (!isNaN(daysVal)) {
          daysvalue = parseFloat(daysVal);
        }
        rateVal =  $(this).closest('tr').find("td:eq(2) input[type='text']").val();
        if (!isNaN(rateVal)) {
          ratevalue = parseFloat(rateVal);
        }

        rowtotal = Math.round(parseFloat(qtyVal)*parseFloat(daysvalue)*parseFloat(ratevalue));
        if (!isNaN(rowtotal)) {
          FinalRow = parseFloat(rowtotal);
        }
        id =  $(this).closest('tr').find("td:eq(3) input[type='text']").attr('id');
        $('#'+id).val(parseFloat(FinalRow).toFixed(2));


    });
    var BundelID = '';
    $(".rowTotal").each(function () {
      //add only if the value is number
      if (!isNaN(this.value) && this.value.length != 0) {
        sum +=  parseFloat(this.value);
      }
      var RowID = $(this).attr('id');
      var suffix = RowID.match(/\d+/)[0];
      BundelID = $('.BundleB'+suffix).attr('id');

        if(RowID.indexOf(BundelID) != -1){
             var BValue = $('#'+RowID).val();
             if (!isNaN(BValue)) {
                Bsum +=  parseFloat(BValue);
              }
        }
        $('.BundelRowTotal'+BundelID).html(parseFloat(Bsum).toFixed(2));

    });

  }

};

$(function () {

  $(document).on('keyup', '.Days', function () {
    calcObject.run();
  });

  $(document).on('keyup', '.Qty', function () {
    calcObject.run();
  });
  $(document).on('keyup', '.rate', function () {
    calcObject.run();
  });


  $('.rowTotal').change(function () {

    calcObject.run();

  });

});

这里的小提琴演示：demo here 我不明白我做错了什么。请给我任何建议。 谢谢。

Answer 1

  

你的bundleId第二次出现问题＆amp;您最初也必须致电run()

试试这个： -

var calcObject = {
  run: function () {

    var id = ''; 
    var sum =bundleSum=qtyVal=daysVal=rateVal=rowtotal =calcVat=daysvalue=ratevalue=FinalRow=Bsum=0;

    $(".Qty").each(function () {
      //add only if the value is number
      if (!isNaN(this.value) && this.value.length != 0) {
        qtyVal =  parseFloat(this.value);
      }
        daysVal =  $(this).closest('tr').find("td:eq(1) input[type='text']").val();
        if (!isNaN(daysVal)) {
          daysvalue = parseFloat(daysVal);
        }
        rateVal =  $(this).closest('tr').find("td:eq(2) input[type='text']").val();
        if (!isNaN(rateVal)) {
          ratevalue = parseFloat(rateVal);
        }

        rowtotal = Math.round(parseFloat(qtyVal)*parseFloat(daysvalue)*parseFloat(ratevalue));
        if (!isNaN(rowtotal)) {
          FinalRow = parseFloat(rowtotal);
        }
        id =  $(this).closest('tr').find("td:eq(3) input[type='text']").attr('id');
        $('#'+id).val(parseFloat(FinalRow).toFixed(2));

      
    });
    var BundelID = '';
    $(".rowTotal").each(function (index,value) {
      //add only if the value is number
      if (!isNaN(this.value) && this.value.length != 0) {
        sum +=  parseFloat(this.value);
      }
      var RowID = $(this).attr('id');
      var suffix = RowID.match(/\d+/)[0];
      if(index == 0){
      BundelID = $('.BundleB'+suffix).attr('id');
      }
      

        if(RowID.indexOf(BundelID) != -1){
             var BValue = $('#'+RowID).val();
             if (!isNaN(BValue)) {
                Bsum +=  parseFloat(BValue);
              }
        }
  $('.BundelRowTotal'+BundelID).html(parseFloat(sum).toFixed(2));
    });
   
 
  }

};

$(function () {
//run it first time also
calcObject.run();

  $(document).on('keyup', '.Days', function () {
    calcObject.run();
  });
  
  $(document).on('keyup', '.Qty', function () {
    calcObject.run();
  });
  $(document).on('keyup', '.rate', function () {
    calcObject.run();
  });


  $('.rowTotal').change(function () {

    calcObject.run();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="view_job cust_view_job table-striped table text-center" style="width: 100%;border:1px solid #ccc">
    <thead>
        <tr style="background:#2b2e76" ;="">
            <th colspan="3" style="padding: 0;">
                <p style="color:white">
                   Bundle Two
                </p>
            </th>
            
            <th><p style="color:white" class="BundleB773423" id="B7734">Total : <span class="BundelRowTotalB7734">200</span></p></th>
           
        </tr>
        <tr>
            <th style="width:5%;text-align: center">Qty</th>
            <th style="width:5%;text-align: center">Days</th>
            <th style="width:10%;text-align: center">Rate</th>
            <th style="width:10%;text-align: center">Row Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
            
            <td>
                <input type="text" value="1" readonly="" autocomplete="off" name="qty[]" placeholder="Qty" class="form-control Qty">
            </td>
            <td>
                <input type="text" value="2" autocomplete="off" name="days[]" placeholder="Days" class="form-control Days">
            </td>
            <td>
                <input type="text" value="100.00" autocomplete="off" id="rate_23" name="rate[]" placeholder="Rate" class="form-control rate">
            </td>
            <td>
                <input type="text" value="200.00" autocomplete="off" readonly="" name="row_total[]" id="row_totalB773423" placeholder="Row Total" class="form-control rowTotal">
            </td>
            </tr>
            <tr>
                
              
                <td>
                    <input type="text" value="1" readonly="" autocomplete="off" name="qty[]" placeholder="Qty" class="form-control Qty">
                </td>
                <td>
                    <input type="text" value="1" autocomplete="off" name="days[]" placeholder="Days" class="form-control Days">
                </td>
                <td>
                    <input type="text" value="200.00" autocomplete="off" id="rate_24" name="rate[]" placeholder="Rate" class="form-control rate">
                </td>
                <td>
                    <input type="text" value="200.00" autocomplete="off" readonly="" name="row_total[]" id="row_totalB773424" placeholder="Row Total" class="form-control rowTotal">
                </td>
                </tr>
            </tbody>
        </table>