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>

JS：Sum列值并更新结果

1 个答案: