CODEWITHSUNDEEP
jqueryhtml
06011991
06011991

Reputation: 807

how to get the table total by adding the rows of that table using jquery

I need to get the table total by adding of that table rows based on the same id but here for the first table it's coming correctly but for the second table it's adding the first table total and displaying the sum. How to avoid of adding that to the second table. my HTML code:

<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>

my 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));

    });

Here the output what I m getting

enter image description here

But I want the output should be like below

enter image description here

Any suggestions Please! Thank you.

Upvotes: 4

Views: 66

Answers (3)

Mohammed Elshennawy
Mohammed Elshennawy

Reputation: 967

You just have a problem in you Ids Parse try this code instead of yours

Note -> the lines changed are commented.

Updated

 $("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 is a working copy Note-> I removed the Sums from the HTML and the Numbers are Calculated by the code

Upvotes: 2

Mamunur Rashid
Mamunur Rashid

Reputation: 742

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>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this: Iterate each table and then iterate input from each table to calcluate total value 

 $(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>

Upvotes: 2

Related Questions