вычисление суммы и вычитания строки таблицы с использованием jquery

Question

Я хочу вычислить только sum of all columns и subtraction of col1 and col2, я нашел несколько примеров в сети, чтобы добавить данные строки, но как я могу выполнить оба действия в одной строке. используя имя класса или идентификатора.

<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

Переберите все table tr и используйте .find() в нужных вам столбцах. Я добавил .col в каждый из столбцов значений, поэтому нам не нужно указывать три столбца при добавлении.

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>

Вот ответ с использованием полей ввода;

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

Answer 2

Пожалуйста, проверьте этот рабочий пример.

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>