为何无参数调用时HTML表格计算无法显示总计？

问题场景 #

刚入门JS与JQuery，遇到一个问题：无参数调用add_to_total函数时，无法计算表格中qty（数量）与price（价格）的乘积，代码中标记的无参数分支代码未执行，相关代码如下：

原JS代码

function add_to_total(el) {
  if (el) {
    var parent = $(el).closest('tr');
    var price = parent.find('.price').val();
    var qty = parent.find('.qty').val();
    if (price == '' || qty == '') {
      alert('Please make sure that the price and metros are informed correctly.');
      return;
    }
    var total = (price * qty);
    total = total.toFixed(2);
    parent.find('.total_price').html("$" + total);
  } else {
    //THIS IS THE PIECE THAT DOESN'T SEEM TO RUN
    $("#tableRows tr").each(function() {
      $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val()));
    });
    console.log('Row Total: ' + $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val())))
  }

  var gridTotal = 0;
  $(".total_price").each(function(index, item) {
    var val = parseFloat($(this).html().replace(/[$,]/g, ''));
    if (isNaN(val)) val = 0;
    gridTotal += val;
  });
  $('.total').html('$' + gridTotal.toFixed(2));
}

原HTML代码

<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:7%">Precio/m (COP)</th>
      <th style="width:8%">Metros (m)</th>
      <th style="width:10%">Precio Total sin IVA</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="3.91" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="124" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
      <td id="totalValue" class="total">$0.00</td>
    </tr>
  </tfoot>
</table>
<script>
//add_to_total()
</script>

问题原因 #

1. 元素操作方法错误：total_price是<td>标签，不是表单输入元素，不能用.val()设置内容，应该用.html()，原无参数分支里的.val()无法修改<td>的内容，导致看起来代码没执行。
2. this指向错误：无参数分支外的console.log语句中，this并不指向表格行，而是指向全局对象（浏览器中是window），所以这行代码会报错，也无法正确输出内容。
3. 初始化调用被注释：HTML末尾的add_to_total()被注释，页面加载时不会自动触发无参数分支的计算。

修复后的代码 #

修复后的JS代码

function add_to_total(el) {
  if (el) {
    var parent = $(el).closest('tr');
    var price = parent.find('.price').val();
    var qty = parent.find('.qty').val();
    if (price == '' || qty == '') {
      alert('Please make sure that the price and metros are informed correctly.');
      return;
    }
    var total = (price * qty);
    total = total.toFixed(2);
    parent.find('.total_price').html("<strong>$" + total + "</strong>");
  } else {
    $("#tableRows tr").each(function() {
      var price = parseFloat($(this).find('.price').val());
      var qty = parseFloat($(this).find('.qty').val());
      var total = (price * qty).toFixed(2);
      $(this).find('.total_price').html("<strong>$" + total + "</strong>");
      // 循环内部打印当前行的计算结果
      console.log('Row Total: ' + "$" + total);
    });
  }

  var gridTotal = 0;
  $(".total_price").each(function(index, item) {
    var val = parseFloat($(this).html().replace(/[$,]/g, ''));
    if (isNaN(val)) val = 0;
    gridTotal += val;
  });
  $('.total').html('$' + gridTotal.toFixed(2));
}

修复后的HTML代码（仅修改script部分）

<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:7%">Precio/m (COP)</th>
      <th style="width:8%">Metros (m)</th>
      <th style="width:10%">Precio Total sin IVA</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="3.91" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="124" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
      <td id="totalValue" class="total">$0.00</td>
    </tr>
  </tfoot>
</table>
<script>
// 页面加载时自动调用无参数分支计算
add_to_total();
</script>

修复说明 #

• 将无参数分支中设置total_price的.val()改为.html()，并保留<strong>标签保持样式一致
• 把console.log移到each循环内部，确保this指向当前表格行，正确打印每行的计算结果
• 取消add_to_total()的注释，页面加载时自动触发计算
• 拆分计算步骤，先解析价格和数量为浮点数，再计算并格式化，避免潜在的类型错误

内容的提问来源于stack exchange，提问作者onit