汇总键盘上输入字段的值

Question

我想添加所有输入字段的值。有些字段是恒定的，有些字段也必须单击按钮以添加它们并计算值。

单击添加按钮时，会正确添加输入字段，但是所有值的计算都是问题。

$(document).on("keyup", ".price", function() {
  var closestParent = $(this).closest('tr');
  var total = closestParent.find(".price").val();
  var tuition = document.getElementById("tuition").value;
  var pta = document.getElementById("pta").value;
  var transport = document.getElementById("transport").value;
  var totals = parseInt(total);
  var t = 0;
  $('.price').each(function(i, e) {
    var amt = $(this).val() - 0;
    var z = t += amt;
    var totalz = z + tuition + transport + pta;
    document.getElementById("tot").value = tuition;
    console.log(t);
    console.log(tuition)

  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td style="width: 60%;">
        <h5>Tuition Fees </h5>
      </td>
      <td>
        <input class="form-control" id="tuition" name="tuition_fees" type="text" placeholder="Enter Tuition Fees..." value="" style="border:none;" />

      </td>
    </tr>
    <tr>
      <td style="width: 60%;">
        <h5>PTA Dues </h5>
      </td>
      <td>
        <input class="form-control" id="pta" name="PTA_dues" type="text" placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />

      </td>
    </tr>
    <tr>
      <td style="width: 60%;">
        <h5>Transport Fares </h5>
      </td>
      <td>
        <input class="form-control" id="transport" name="transport_fares" type="text" placeholder="Enter Transport Fare..." value="" style="border:none;" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <h5>Additional Fees </h5>
      </td>
    </tr>
  </tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
  <tbody>
    <tr>

      <td style="width: 60%;">
        <div class="row">
          <div class="col-md-1"><input class="itemRow" type="checkbox"></div>
          <div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control price" autocomplete="off"></div>
        </div>
      </td>
      <td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control" autocomplete="off"></td>
    </tr>
  </tbody>

</table>
<div class="row">
  <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    <button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
    <button class="btn btn-success" id="addRows" type="button">+ Add item</button>
  </div>

</div>
<br/>
<table class="table table-bordered">
  <tr>
    <td style="width:60%;">
      <h5>TOTAL FEES </h5>
    </td>
    <td><input class="form-control" id="tot" name="total_fees" type="text" placeholder="total fees" value="" style="border:none;" /></td>
  </tr>
</table>

我要做的是获取“总费用”输入字段中值的总和

Answer 1

使用parseInt解析文本框值。那么您每次都在重新定义t，所以我对其进行了编辑。然后将您的班级名称price从enter fee name移至enter amount文本框。

$(document).on("keyup",".price",function(){
            var closestParent = $(this).closest('tr');
         var total = parseInt(closestParent.find(".price").val()); 
         var tuition = parseInt(document.getElementById("tuition").value);
         var pta = parseInt(document.getElementById("pta").value);
         var transport = document.getElementById("transport").value;
         var totals = parseInt(total);
          var t = 0;
         $('.price').each(function(i,e){ 
            var amt =$(this).val()-0; 
            t += amt;
                var z = t;
                var totalz = z +  tuition + transport +  pta;
                document.getElementById("tot").value=tuition;
         console.log(t);
         console.log(tuition)

         })

           });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody>
              <tr>
                <td style="width: 60%;">
                  <h5>Tuition Fees </h5>
                </td>
                <td>
                  <input class="form-control" id="tuition" name="tuition_fees" type="text"
                  placeholder="Enter Tuition Fees..." value=""  style="border:none;" />

                </td>
              </tr>
              <tr>
                <td style="width: 60%;">
                  <h5>PTA Dues </h5>
                </td>
                <td>
                  <input class="form-control" id="pta" name="PTA_dues" type="text"
                  placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />

                </td>
              </tr>
               <tr>
                <td style="width: 60%;">
                  <h5>Transport Fares </h5>
                </td>
                <td>
                  <input class="form-control" id="transport" name="transport_fares" type="text"
                  placeholder="Enter Transport Fare..." value="" style="border:none;" />
                </td>
              </tr>
               <tr>
                <td colspan="2" >
                  <h5>Additional Fees </h5>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered table-hover table-striped" id="invoiceItem">
            <tbody>
              <tr>

                  <td style="width: 60%;"><div class="row">
                    <div class="col-md-1"><input class="itemRow" type="checkbox"></div>
                    <div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control" autocomplete="off"></div></div></td>
              <td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control price" autocomplete="off"></td>
              </tr>
            </tbody>

          </table>
                <div class="row">
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
          <button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
          <button class="btn btn-success" id="addRows" type="button">+ Add item</button>
        </div>

      </div>
      <br/>
      <table class="table table-bordered">
         <tr>
                <td style="width:60%;"  >
                  <h5>TOTAL FEES </h5>
                </td>
                <td><input class="form-control" id="tot" name="total_fees" type="text"
                  placeholder="total fees" value="" style="border:none;" /></td>
              </tr>
      </table>