如何计算HTML中另一个<td>标签中一个<td>标签中两个值的差异

Question

我有一个 HTML 表格，它被渲染，就像，

{% 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 %}

我也尝试过使用 jQuery：

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

但我只得到一栏。提前致谢。

Answer 1

• 您在第二个 ID 中有错字 - 缺少引号
• ID 必须是唯一的，因此请改用一个类，您可以遍历所有前列
• 您可以通过 .next 和/或 .closest 使用相对寻址来获取其他列

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

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

Answer 2

您不能有多个具有相同 id 的列，请改用类

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