CODEWITHSUNDEEP
javascripthtmljquerydjango-2.1
surya raj
surya raj

Reputation: 195

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

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.

Upvotes: 1

Views: 561

Answers (2)

Daphoque
Daphoque

Reputation: 4678

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>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177685

  • 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>

Upvotes: -1

Related Questions