javascript - JS : Sum column values and updating result on change

Question

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

• 每一行都有一个唯一的 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>

我开始学习 Javascript，但这超出了我目前的了解。到目前为止，我尝试了在网上看到的一些东西，但没有成功。如果您有更好的建议，请随时发布。我会尝试理解它并将其付诸实践。

JS:

    $(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;
    });

预先感谢您的任何建议。

Answer 1

您可以使用此代码。 为每个输入(将从中获取值)添加此类，例如: toBeCalced，对于将显示总计的每个输入，此类例如 total。
在 JS 中，我们将使用 JQuery 来监听 change 事件，并执行以下步骤:

• 转到父行。
• 使用 toBeCalced 类迭代每个子级，并将其值添加到 total 变量中。
• 通过类名total获取总输入并设置总值。

我们得到这个结果:

$(document).ready(function() {
    $('.toBeCalced').change(function() {
      var row = $(this).closest('tr');
      var valuesToSum = row.find('.toBeCalced');
      var total = 0;
      $.each(valuesToSum, function(index, item) {
        total += parseInt($(item).val());
      });

      var totalInput = row.find('.total')[0];
      $(totalInput).val(total);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
  <tr>
      <td>Element Name ABC</td>
      <td>
          <div class="form-group">
          <div><input id="SM-J3D-01-1" type="number" min="0" step="1" name="Validos" class="toBeCalced 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-1" type="number" min="0" step="1" name="Cortesia" class="toBeCalced 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="total form-control" value="0" />
          <span class="text-danger field-validation-valid" data-valmsg-for="Total" data-valmsg-replace="true"></span>
          </div>
          </div>
      </td>
  </tr>
  //Begining second row    
  <tr>
      <td>Element Name XYZ</td>
      <td>
          <div class="form-group">
          <div><input id="SM-J3D-01-2" type="number" min="0" step="1" name="Validos" class="toBeCalced 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" type="number" min="0" step="1" name="Cortesia" class="toBeCalced 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="total form-control" value="0" />
                 <span class="text-danger field-validation-valid" data-valmsg-for="Total" data-valmsg-replace="true"></span>
             </div>
             </div>
         </td>
      </tr>
    </tbody>
  </table>