CODEWITHSUNDEEP
javascriptjquery
Fayakon
Fayakon

Reputation: 1523

calculating sum and subtraction of table row using jquery

i want to calculate sum of all columns, and subtraction of col1 and col2 only, i found few examples online to add row data but how i can perform both action on one row. using class or id name.

<table id="sum_table" width="450" border="1">

  <thead>
    <tr>

      <th>column one</th>
      <th >column two</th>
      <th >column three</th>
      <th >sum of all columns</th>
      <th >subtraction</th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td class="col1">1</td>
      <td class="col2">2</td>
      <td class="col3">3</td>
    <td><span class="sum"></span> </td>
    <td><span class="subtract"></span> </td>
    </tr>
    <tr>

       <td class="col1">43</td>
      <td class="col2">432</td>
      <td class="col3">33</td>
      <td> <span class="sum"></span> </td>
       <td> <span class="subtract"></span> </td>
    </tr>
  </tbody>
</table>

<button id="calculate" onclick = "calculate()">calculate</button>

jquery:

function calculate(){
var col1=$('.col1').text();
var col2=$('.col2').text();
var col3=$('.col3').text();
var sum= col1+col2+col3;
var subtract= col1-col2;
$(".sum").text(sum);
$(".subtract").text(subtract);
}

JSFiddle

Upvotes: 1

Views: 1321

Answers (2)

Jerdine Sabio
Jerdine Sabio

Reputation: 6150

Loop through all the table tr and use .find() on the columns you need. I added .col on each of the value columns so we won't need to specify the three columns on addition.

function calculate() {
  var sum;
  var difference;
  $("tbody tr").each(function() {
    sum = 0;
    difference = 0;

    $(this).find(".col").each(function() {
      // console.log($(this).html());
      sum += parseFloat($(this).html());
    });

    difference = parseFloat($(this).find(".col1").html()) - parseFloat($(this).find(".col2").html());

    $(this).find(".sum").html(sum);
    $(this).find(".subtract").html(difference);
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">

  <thead>
    <tr>

      <th>column one</th>
      <th>column two</th>
      <th>column three</th>
      <th>sum of all columns</th>
      <th>subtraction</th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td class="col col1">1</td>
      <td class="col col2">2</td>
      <td class="col col3">3</td>
      <td><span class="sum"></span> </td>
      <td><span class="subtract"></span> </td>
    </tr>
    <tr>

      <td class="col col1">43</td>
      <td class="col col2">432</td>
      <td class="col col3">33</td>
      <td> <span class="sum"></span> </td>
      <td> <span class="subtract"></span> </td>
    </tr>
  </tbody>
</table>

<button id="calculate" onclick="calculate()">calculate</button>

Here's the answer using input fields;

$(document).ready(function() {
  $("#calculate").on("click", function() {

    var sum;
    var difference;
    $("tbody tr").each(function() {
      sum = 0;
      difference = 0;

      $(this).find(".col").each(function() {
        // console.log($(this).html());
        sum += parseFloat($(this).find("input").val());
      });

      difference = parseFloat($(this).find(".col1").find("input").val()) - parseFloat($(this).find(".col2").find("input").val());

      $(this).find(".sum").html(sum);
      $(this).find(".subtract").html(difference);
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">

  <thead>
    <tr>

      <th>column one</th>
      <th>column two</th>
      <th>column three</th>
      <th>sum of all columns</th>
      <th>subtraction</th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td class="col col1"><input value="1" /></td>
      <td class="col col2"><input value="2" /></td>
      <td class="col col3"><input value="3" /></td>
      <td><span class="sum"></span> </td>
      <td><span class="subtract"></span> </td>
    </tr>
    <tr>

      <td class="col col1"><input value="43" /></td>
      <td class="col col2"><input value="432" /></td>
      <td class="col col3"><input value="33" /></td>
      <td> <span class="sum"></span> </td>
      <td> <span class="subtract"></span> </td>
    </tr>
  </tbody>
</table>

<button id="calculate">Sum
</button>

Upvotes: 1

jishan siddique
jishan siddique

Reputation: 1895

Please check this working example.

var col1=0,col2=0,col3=0,sum=0,subtract=0;
function calculate(){
$(".jsTableBody tr").each(function(){
col1=$(this).find('.col1').text();
col2=$(this).find('.col2').text();
col3=$(this).find('.col3').text();
sum= parseInt(col1) + parseInt(col2)+ parseInt(col3);
console.log(sum);
subtract= parseInt(col1)-parseInt(col2);
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(subtract);
})

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">

  <thead>
    <tr>

      <th>column one</th>
      <th >column two</th>
      <th >column three</th>
      <th >sum of all columns</th>
      <th >subtraction</th>

    </tr>
  </thead>
  <tbody class="jsTableBody">
    <tr>
      <td class="col1">1</td>
      <td class="col2">2</td>
      <td class="col3">3</td>
    <td><span class="sum"></span> </td>
    <td><span class="subtract"></span> </td>
    </tr>
    <tr>

       <td class="col1">43</td>
      <td class="col2">432</td>
      <td class="col3">33</td>
      <td> <span class="sum"></span> </td>
       <td> <span class="subtract"></span> </td>
    </tr>
  </tbody>
</table>

<button id="calculate" onclick = "calculate()">calculate</button>

Upvotes: 1

Related Questions