CODEWITHSUNDEEP
javascriptjquery
john
john

Reputation: 1273

how to calculate substraction from 2 values in a table with javascript jquery

I have a table

I want to calculate the substraction from the volume for each day towards the day before.

How can I do that with jquery?

//I tried to use `map` function but don't know how to handle this

const volumes = $('tr td.volume').map(function() {
  return $(this).text();
}).get();
console.log(volumes)
// now i have all the volume values; bu how to abstract for each and inject val in `consumed` class?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td class="date">2021-08-15</td>
    <td class="volume">660</td>
    <td class="consumed">text should be 20 (680 - 660)</td>
  </tr>
  <tr>
    <td class="date">2021-08-14</td>
    <td class="volume">680</td>
    <td class="consumed">text should be 30 (710 - 680)</td>
  </tr>
  <tr>
    <td class="date">2021-08-13</td>
    <td class="volume">710</td>
    <td class="consumed">text should be 20 (730 - 710)</td>
  </tr>
  <tr>
    <td class="date">2021-08-12</td>
    <td class="volume">730</td>
    <td class="consumed">text should be 50 (780 - 730)</td>
  </tr>
  <tr>
    <td class="date">2021-08-11</td>
    <td class="volume">780</td>
    <td class="consumed"></td>
  </tr>
</table>

Upvotes: 0

Views: 63

Answers (4)

Spectric
Spectric

Reputation: 31992

Loop through each element with the volume class, get the element with the volume class in the next row, get the difference, and assign that to the innerHTML of the sibling with the consumed class.

$('.volume').each(function() {
  const next = $(this).parent().next().find('.volume')
  $(this).siblings('.consumed').html(+next.html() - $(this).html())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td class="date">2021-08-15</td>
    <td class="volume">660</td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-14</td>
    <td class="volume">680</td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-13</td>
    <td class="volume">710</td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-12</td>
    <td class="volume">730</td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-11</td>
    <td class="volume">780</td>
    <td class="consumed"></td>
  </tr>
</table>

Upvotes: 1

mplungjan
mplungjan

Reputation: 178160

Plain JS version

const trs = [...document.querySelectorAll(".table tbody tr")];
trs.forEach((row, i) => {
  if (i < trs.length - 1) {
    const vol1 = row.querySelector(".volume").textContent;
    const vol2 = trs[i + 1].querySelector(".volume").textContent;
    row.querySelector(".consumed").textContent = vol2 - vol1;
  }
})
<table class="table">
  <tbody>
    <tr>
      <td class="date">2021-08-15</td>
      <td class="volume">660</td>
      <td class="consumed">text should be 20 (680 - 660)</td>
    </tr>
    <tr>
      <td class="date">2021-08-14</td>
      <td class="volume">680</td>
      <td class="consumed">text should be 30 (710 - 680)</td>
    </tr>
    <tr>
      <td class="date">2021-08-13</td>
      <td class="volume">710</td>
      <td class="consumed">text should be 20 (730 - 710)</td>
    </tr>
    <tr>
      <td class="date">2021-08-12</td>
      <td class="volume">730</td>
      <td class="consumed">text should be 50 (780 - 730)</td>
    </tr>
    <tr>
      <td class="date">2021-08-11</td>
      <td class="volume">780</td>
      <td class="consumed"></td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Andrew Corrigan
Andrew Corrigan

Reputation: 1057

To expand on Phaelax's solution to allow for your table structure changing but maintaining those classes (would add as a comment, but I don't have enough rep points for that yet):

// Get rows
var tr = $('tr');

// loop through rows except last
for(var i=0; i < tr.length - 1; i++){
  // current row and next row under it
  var row      = tr[i];
  var next_row = tr[i+1];
  
  // Grab values from volume column
  var v1 = parseInt($(row).children('td.volume').text());
  var v2 = parseInt($(next_row).children('td.volume').text());
  
  // Calc new value
  var new_val = v2 - v1;
  
  // Put new value in 3rd column
  $(row).children('td.consumed').text(new_val);
  
}

You might even be able to refine it a bit more from here by putting a similar loop in a:

$('tr').each(function(row) {
});

Upvotes: 0

Phaelax z
Phaelax z

Reputation: 1999

I realized after writing this that each column had it's own class assigned, so this could probably be written a little neater as my solution relies on your exact table structure.

// Get rows
var $tr = $('tr');

// loop through rows except last
for (var i = 0; i < $tr.length - 1; i++) {
  // current row and next row under it
  var row = $tr.get(i);
  var next_row = $tr.get(i + 1);

  // Grab values from volumn column
  var v1 = parseInt($(row).children('td')[1].innerHTML);
  var v2 = parseInt($(next_row).children('td')[1].innerHTML);

  // Calc new value
  var new_val = v2 - v1;

  // Put new value in 3rd column
  $(row).children('td')[2].innerHTML = new_val;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
  <tr>
    <td class="date">2021-08-15</td>
    <td class="volume">660</td>
    <td class="consumed">text should be 20 (680 - 660)</td>
  </tr>
  <tr>
    <td class="date">2021-08-14</td>
    <td class="volume">680</td>
    <td class="consumed">text should be 30 (710 - 680)</td>
  </tr>
  <tr>
    <td class="date">2021-08-13</td>
    <td class="volume">710</td>
    <td class="consumed">text should be 20 (730 - 710)</td>
  </tr>
  <tr>
    <td class="date">2021-08-12</td>
    <td class="volume">730</td>
    <td class="consumed">text should be 50 (780 - 730)</td>
  </tr>
  <tr>
    <td class="date">2021-08-11</td>
    <td class="volume">780</td>
    <td class="consumed"></td>
  </tr>
</table>

Upvotes: 0

Related Questions