How to calculate the difference of two values in a tag in another tag in HTML

Question

I have a table in HTML which is rendered and it is like,

{% for element in combined_list %}
<td id='first'>element.first</td>
<td id='second'>element.second</td>
<td id='diff>I want the difference of first and second here</td>
{% endfor %}

I tried with jQuery also like:

jQuery(document).ready(function($) {
        let first_= jQuery('#first','/^[0-9]*$/' ).text();
        let second_ = jQuery('#second').html();
        let diff = first_- second_ ;
            $('#diff').html(diff)
                      
    });

But Im getting for only one column. Thanks in advance.

Remove the regex from the jQuery selector in your example and the code should work fine - assuming both values are numeric. If it's not working for you please edit the question to include the **actual** HTML with a demonstration of the values being used, and what the output should be. — Rory McCrossan, Aug 16 '21 at 10:36
I want to add regex for getting only the numbers since the values in the table have Unit (kg). I tried removing it still I'm getting value for only one column. Is there any way to use the regex here? — surya raj, Aug 16 '21 at 10:39
Sure, but the form the regex takes would depend on your HTML. You may even simply be able to use `parseInt()` — Rory McCrossan, Aug 16 '21 at 10:39
So this question is not Django relevant AT ALL. Please click [edit] then `[<>]` and post a [mcve] using RENDERED HTML and JS only plus relevant CSS and jQuery — mplungjan, Aug 16 '21 at 10:43
Also you have a typo in the second id - missing quote and IDs need to be unique so use a class and you have all the first columns and you can use relative addressing via .closest to get the other column — mplungjan, Aug 16 '21 at 10:44

Daphoque · Answer 1 · 2021-08-16T13:03:55.550

0

You can't have multiple column with the same id, use class instead

$(document).ready(function(){
  
  var rows = document.getElementById("table").getElementsByTagName("tr");
  
  for(var i = 0; i < rows.length; i++)
  {
    var first = parseInt(rows[i].getElementsByClassName("first")[0].textContent);
    var second = parseInt(rows[i].getElementsByClassName("second")[0].textContent);
    var diff = first - second;
    
    console.log("First: "+first+" - second : "+second+" = "+diff);

    rows[i].getElementsByClassName("diff")[0].textContent = diff;
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='table'>
<tr>
<td class='first'>5</td>
<td class='second'>4</td>
<td class='diff'>diffhere</td>
</tr>
<tr>
<td class='first'>9</td>
<td class='second'>3</td>
<td class='diff'>diffhere</td>
</tr>
</table>

edited Aug 16 '21 at 13:03

answered Aug 16 '21 at 10:55

Daphoque

4,421
1
20
31

document.ready is much more complete than just the load / DOMContentLoaded event, in addition byClassName, byTagName, etc.. have much better performance than querySelector / querySelectorAll O(1) vs O(n), but i agree on the innerHTML wich is not the best way to do it in this case :) But that is of course just an opinion you can ignore ;D – Daphoque Aug 16 '21 at 11:14
haha no one knows the OP might be from Google trying to find a solution for a 1 billion row table :D – Daphoque Aug 16 '21 at 11:24
Obviously someone disagrees with me so much I get voted down and you get voted up!? – mplungjan Aug 16 '21 at 11:29
1

So your solution is 85% slower than mine for 4 rows https://jsbench.me/f1kselbfka/1 and 99% slower with 3000 rows – mplungjan Aug 16 '21 at 12:21
haha i take into account your comment about textContent vs innerHTML, now mine is faster :p – Daphoque Aug 16 '21 at 13:03
I am still voted down. That pisses me off no end – mplungjan Aug 16 '21 at 13:08

mplungjan · Answer 2 · 2021-08-16T11:59:58.743

You have a typo in the second id - missing quote
IDs need to be unique so use instead a class and you can loop over all the first columns
you can use relative addressing via .next and/or .closest to get the other columns

$(function() {
  $("#tb .first").each(function() {
    const val1 = +$(this).text();
    const val2 = +$(this).next().text();
    $(this).closest("tr").find(".diff").text(val1 - val2);
  })
})

td {
  border: 1px solid black;
  padding: 3px;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>1st</th>
      <th>2nd</th>
      <th>Diff</th>
    </tr>
  </thead>
  <tbody id="tb">
    <tr>
      <td class="first">11</td>
      <td class="second">9</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">12</td>
      <td class="second">8</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">13</td>
      <td class="second">7</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">14</td>
      <td class="second">6</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">15</td>
      <td class="second">5</td>
      <td class="diff"></td>
    </tr>
  </tbody>
</table>

Plain JS

window.addEventListener('load', function() {
  [...document.querySelectorAll('#tb .first')].forEach(cell => {
    const parent = cell.closest('tr');
    const val1 = +cell.textContent;
    const val2 = +parent.querySelector('.second').textContent;
    parent.querySelector('.diff').textContent = val1 - val2;
  })
})

td {
  border: 1px solid black;
  padding: 3px;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>1st</th>
      <th>2nd</th>
      <th>Diff</th>
    </tr>
  </thead>
  <tbody id="tb">
    <tr>
      <td class="first">11</td>
      <td class="second">9</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">12</td>
      <td class="second">8</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">13</td>
      <td class="second">7</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">14</td>
      <td class="second">6</td>
      <td class="diff"></td>
    </tr>
    <tr>
      <td class="first">15</td>
      <td class="second">5</td>
      <td class="diff"></td>
    </tr>
  </tbody>
</table>

How to calculate the difference of two values in a tag in another tag in HTML

2 Answers2