我可以用 JS 在另一个 td 中获取 td 值和输入值的总和吗？

Question

我有一个包含 td 值的表，并在另一个包含值的 td 中输入。

我想得到 td 值和包含输入的其他 td 的总和。

这是代码，但不能完美运行：

let gross = 0;
$(".total").each(function() {
  gross += parseFloat($(this).val());
});
document.getElementById('gross_amount').innerHTML = gross;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>#</td>
      <td>Name</td>
      <td>Age</td>
      <td>Salary</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hazem</td>
      <td>20</td>
      <td class="total">50.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>25</td>
      <td><input class="total" type="text" value="60.00" /></td>
    </tr>
  </tbody>
  <div id="gross_amount"></div>
</table>

Answer 1

问题是因为一个元素是td，另一个是input，并且只有input 元素具有value 属性以供val() 读取。

要解决此问题，您可以使用 tagName 检测元素的类型，然后基于此检索 text() 或 val()：

let gross = 0;
$(".total").each(function() {
  let $el = $(this);
  gross += parseFloat(this.tagName == 'INPUT' ? $el.val() : $el.text());
});
$('#gross_amount').text(gross.toFixed(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>#</td>
      <td>Name</td>
      <td>Age</td>
      <td>Salary</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hazem</td>
      <td>20</td>
      <td class="total">50.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>25</td>
      <td><input class="total" type="text" value="60.00" /></td>
    </tr>
  </tbody>
</table>
<div id="gross_amount"></div>

请注意，#gross_amount div 必须位于 <table> 元素之外才能使您的 HTML 有效。另外，如果您已经加载了 jQuery，那么您不妨保持代码一致，并使用它来更新 #gross_amount 元素。