Javascript JS：求和列值并在更改时更新结果

我有一个表格，对于每一行，我必须显示两列的总和，并在第三列中显示。每次输入发生变化时，必须计算总和

• 每行都有一个唯一的id
• 每个列输入字段都有自己的名称（尽管名称对每行重复）

这是包含示例数据的表的结构：

<tbody>
    <tr>
        <td>Element Name ABC</td>
        <td>
            <div class="form-group">
            <div><input id="SM-J3D-01-1" onkeyup="calc(this);" onchange="calc(this);" type="number" min="0" step="1" name="Validos" class="form-control" value="0" />
                 <span class="text-danger field-validation-valid" data-valmsg-for="Validos" data-valmsg-replace="true"></span>
            </div>
            </div>
        <td>
            <div class="form-group">
            <div><input id="SM-J3D-01-1" onkeyup="calc(this);" onchange="calc(this);" type="number" min="0" step="1" name="Cortesia" class="form-control" value="0" />
                 <span class="text-danger field-validation-valid" data-valmsg-for="Cortesia" data-valmsg-replace="true"></span>
             </div>
             </div>
         </td>
        <td>
            <div class="form-group">
            <div><input id="SM-J3D-01-1" type="number" readonly name="Total" class="form-control" value="0" />
            <span class="text-danger field-validation-valid" data-valmsg-for="Total" data-valmsg-replace="true"></span>
            </div>
            </div>
        </td>
    //Begining second row    
    <tr>
        <td>Element Name XYZ</td>
        <td>
            <div class="form-group">
            <div><input id="SM-J3D-01-2" onkeyup="calc(this);" onchange="calc(this);" type="number" min="0" step="1" name="Validos" class="form-control" value="0" />
                 <span class="text-danger field-validation-valid" data-valmsg-for="Validos" data-valmsg-replace="true"></span>
             </div>
             </div>
         </td>
         <td>
             <div class="form-group">
             <div><input id="SM-J3D-01-2" onkeyup="calc(this);" onchange="calc(this);" type="number" min="0" step="1" name="Cortesia" class="form-control" value="0" />
                  <span class="text-danger field-validation-valid" data-valmsg-for="Cortesia" data-valmsg-replace="true"></span>
              </div>
              </div>
          </td>
          <td>
              <div class="form-group">
              <div><input id="SM-J3D-01-2" type="number" readonly name="Total" class="form-control" value="0" />
                   <span class="text-danger field-validation-valid" data-valmsg-for="Total" data-valmsg-replace="true"></span>
               </div>
               </div>
           </td>

提前感谢您的建议。

您可以使用此代码。 为此类的每个输入（将从中获取值）添加，例如：

toBeCalced

，对于将显示总计的每个输入，例如此类

total

在JS中，我们将使用JQuery监听

change

事件，并执行以下步骤：

• 转到父行
• 使用类

  toBeCalced

  迭代每个子级，并将其值添加到

  total

  变量中
• 按类名获取总输入

  total

  并设置总值

我们得到这个结果：

$（文档）.ready（函数（）{
$（'.toBeCalced'）.change（函数（）{
var行=$（this）.closest（'tr'）；
var valuesToSum=row.find（'.toBeCalced'）；
var合计=0；
$.each（值总和，函数（索引，项）{
总计+=parseInt（$（item）.val（））；
});
var totalInput=row.find（'.total'）[0]；
$（totalInput）.val（总计）；
});
});

元素名称ABC
//开始第二排
元素名称XYZ
您在这方面是否使用jQuery？如果是这样，它可能会大大简化。我看到您在使用
$（）
非常感谢！它工作得很好，这将是一个很好的基础，为类似的另一种情况：）如果你想看看第2部分：
    $(function calc(id) {
        var row = id.parentNode.parentNode;
        var validos = row.cells[6].getElementsByTagName('input')[0].value;
        var cortesia = row.cells[7].getElementsByTagName('input')[0].value;

        resultado = parseFloat(validos) + parseFloat(cortesia);

        row.cells[10].getElementsByTagName('input')[0].value = resultado;
    });