如果一个 <td contenteditable> 不是 <td><input> 中的同一类，如何修复多个输入字段的总和答案

【问题标题】：How to fix sum of multiple input fields if same class in one <td contenteditable> not <td><input>如果一个 <td contenteditable> 不是 <td><input> 中的同一类，如何修复多个输入字段的总和
【发布时间】：2023-03-10 02:32:01
【问题描述】：

我无法在表 td "jumlah" 上为 "total" 求和

<script>
$(document).on("change", ".jumlah", function() {
    var sum = 0;
    $(".jumlah").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});
</script>

<input type="text" id="total" class="total" value=""  />

我希望 jumlah 的总输出

【问题讨论】：

添加一些console.log() 并诊断问题。函数是否被触发？总和是否正确相加？
你也可以发布你的html吗？
和 AFAIK，您需要使用 input 事件处理程序：stackoverflow.com/a/1411296/4875631
我不认为onchange 是合适的事件处理程序，你不应该使用keyup 吗？
请不要问same question twice

标签： javascript html

【解决方案1】：

具有[contenteditable] 属性的元素将没有[value] 属性，因为：

只有<div></div>、<section></section>、<spab></span> 等非交互、非空、流和短语元素可以有[contenteditable]。
只有<input>、<textarea>、<output>等表单控件可以有[value]属性。

所以不要使用.val()，而是使用.text()，因为文本是非表单控件标签之间的内容。重要的变化是三元：

如果这是一个输入，则获取其值，否则获取其文本

sum += $(this).is('input') ? +$(this).val() : +$(this).text();

细微的变化是：

输入事件而不是更改，因为它看起来很流畅。
表单注册到输入事件而不是文档。

$('.totals').on("input", ".subtotal", function() {
  let sum = 0;
  $(".subtotal").each(function(){
    sum += $(this).is('input') ? +$(this).val() : +$(this).text();
  });
  $(".total").val(sum);
});

:root {font:700 16px/1.2 Consolas}
input, output, data {display:inline-block;font:inherit;text-align:right;width:125px;}
output, data {width:50px}
data {outline:1px solid #aaa;padding:2px 17px 2px 0px;margin:1px 0px 1px 2px;width:110px}

<form class='totals'>
  <table>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><input class="subtotal" type='number' value='0'></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td><data class="subtotal" contenteditable>0</data></td></tr>
  <tr><td>Total: <output class="total">0</output></td></tr>
  </table>
 </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

【解决方案2】：

我已经根据您的需要创建了一个非常简单的示例，我认为您可以轻松地在您的代码中实现类似的东西。

$('.jumlah').on('input', function() {
  let elementsToSum = $(document).find('.jumlah');
  let sum = 0;
  for (let ele of elementsToSum) {
    // Parse the value of the <td> to integer
    let eleIntValue = parseInt($(ele).html());
    if (!isNaN(eleIntValue)) {
      // Only add it to the sum if it is a number (not empty)
      sum += eleIntValue;
    }
  }
  
  // Change the value of <input> with the new calculated sum
  $('#total').val(sum);
});

td {
  width: 50px;
}

<table border="1">
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
  <tr>
    <td contenteditable="true" class="jumlah"></td>
  </tr>
</table>

<br>
<input type="text" id="total" class="total" value="" />

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

【讨论】：