如何通過使用jquery添加該表的行來獲取表總數

Question

我需要通過基於相同的id添加該錶行來獲得表總數，但是對於第一個表而言，它將正確傳入，但是對於第二個表它將添加第一個表格總數並顯示總和。 如何避免將其添加到第二個表。 我的HTML代碼：

<table> 
    <tr style="background:#2b2e76"> 
    <th colspan="1" style="padding: 0;"> 
     <p style="color:white"> 
     Table One 

     </p> 
    </th> 
    <th> 
     <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936">1400.00</span></p> 
    </th> 
    </tr> 
    <tr> 
    <td> 
     <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal"> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal"> 
    </td> 
    </tr> 
</table> 
<table> 
    <tr style="background:#2b2e76"> 
    <th colspan="1" style="padding: 0;"> 
     <p style="color:white"> 
     Table Two 

     </p> 
    </th> 
    <th> 
     <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027">1750.00</span></p> 
    </th> 
    </tr> 
    <tr> 
    <td> 
     <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal"> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal"> 
    </td> 
    </tr> 
</table> 

我的jquery：

var Bsum = 0; 
    var BundelID = ''; 
    $(".rowTotal").each(function() { 
     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)); 

    }); 

這裏輸出什麼，我m到處

但我想要的輸出應該像下面

任何建議請！ 謝謝。

Answer 1

你只是有一個問題，在你Ids Parse試試這個代碼而不是你的

注 - >更改的行被註釋。

更新

$("table").each(function() { 
var Bsum = 0; 
    var BundelID = ''; 
$(this).find(".rowTotal").each(function() { 

    var RowID = $(this).attr('id'); 
    //var suffix = RowID.match(/\d+/)[0]; 
    var suffix = RowID.split("_")[1]; 

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

}); 
}); 

Here是工作拷貝 注意 - >我刪除從HTML的款項和號碼由

Answer 2

試試這個：遍歷每個表，然後從每個表重複輸入calcluate總價值

$(function(){ 
 
     $('table').each(function(){ 
 
      var $totalRow = $(this).find('span[class^="BundelRowTotal"]'); 
 
      var total = 0.0; 
 
      $(this).find('input.rowTotal').each(function(){ 
 
      total += parseFloat($(this).val()) || 0.0; 
 
      }); 
 
      $totalRow.html(parseFloat(total).toFixed(2)); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr style="background:#2b2e76"> 
 
    <th colspan="1" style="padding: 0;"> 
 
     <p style="color:white"> 
 
     Table One 
 

 
     </p> 
 
    </th> 
 
    <th> 
 
     <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936">1400.00</span></p> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal"> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr style="background:#2b2e76"> 
 
    <th colspan="1" style="padding: 0;"> 
 
     <p style="color:white"> 
 
     Table Two 
 

 
     </p> 
 
    </th> 
 
    <th> 
 
     <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027"></span></p> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal"> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

var val1 = +$('#rowtotal11_B4936').val(); 
 
var val2 = +$('#rowtotal12_B4936').val(); 
 
$('.BundelRowTotalB4936').text(val1+val2); 
 

 
var val3 = +$('#rowtotal16_B1027').val(); 
 
var val4 = +$('#rowtotal17_B1027').val(); 
 
$('.BundelRowTotalB1027').text(val4+val3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
 
<table> 
 
    <tr style="background:#2b2e76"> 
 
    <th colspan="1" style="padding: 0;"> 
 
     <p style="color:white"> 
 
     Table One 
 

 
     </p> 
 
    </th> 
 
    <th> 
 
     <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936"></span></p> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal"> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr style="background:#2b2e76"> 
 
    <th colspan="1" style="padding: 0;"> 
 
     <p style="color:white"> 
 
     Table Two 
 

 
     </p> 
 
    </th> 
 
    <th> 
 
     <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027">1750.00</span></p> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal"> 
 
    </td> 
 
    </tr> 
 
</table>