使用jquery计算表行的总和和减法

Question

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

Answer 1

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>

Answer 2

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>