2017-06-16 54 views
0

我有表格数据。我需要通过将该表内的RowTotal column的所有行相加来显示表格总数Total。但在我的循环中,它只取第一行,不包括第二行。 HTML代码:使用jquery得到表中所有行的总和

<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 我不明白的地方我在做错误的。任何建议,请。 谢谢。

+0

学会调试代码:添加'console.l og(BundelID)'在.rowTotal中 - 对于第二行,它没有定义 –

+0

第一个试图找到捆绑匹配'773423'第二'773424'和捆绑行是'BundleB773423',所以只有第一个匹配 –

+0

是啊真的!谢谢我检查 – 06011991

回答

0

bundleId在第二次&来错了,你必须首先调用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>

+0

不要求名誉,它会减少你。 –

相关问题