javascript - 如何在没有按钮的情况下使用 javascript 在 html 表中执行计算(表是根据输入值创建的)？

Question

我的问题是如何在没有按钮的情况下在 html 表中执行计算(行是根据输入值创建的)。

This is code.......这是我有上传代码的链接。请帮助解决这个问题。

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

$(function(){
  $('#txtDate, #follow_Date, .ND').keyup( function () {

    // Clear rows
    var trLength = $('body #appendRows tr').length;
    for (var i = 1; i <trLength; i++) {
      $('#appendRows tr:nth-child(2)').remove();
    }

    var val = (!$(".ND").val()) ? 1 : val = $(".ND").val();
    var m  =  $("#follow_Date").val();
    var j = $("#TDAmt").val();
    //var total = val * j;

   // $("#SchTotal").val(total);
    var k = document.getElementById('txtDate').value;

    var currentDate = moment(k); 

    for (i = 0, len = val; i < val; ++i) {
      var newdate = currentDate.add(parseInt(m), 'days');
      var html = $("#appendRows tr:first-child").clone();
      html.find("input").val("");
      html.find('input[name^="Sno"]').val(i+1);
      //html.find('input[name^="Amount"]').val();
      // I format this to make it clear
      html.find('input[name^="Date"]')
          .val(newdate.format('DD/MM/YYYY'));
      $('#appendRows').append(html);

    }

    // Remove that first row
    $("#appendRows tr:first-child").remove();
  });
  });
  $(function(){
$('#but').click( function () {
var sum=0;
$("input[name='Amount[]']").each(function(){ 
sum += +$(this).val(); 
});
$("#SchTotal").val(sum);
});
});

这是java脚本代码....

Answer 1

使用 on 像这样绑定(bind)输入/更改事件。

Jquery on()

$(document).on("input", ".form-control", function() {
    var sum = 0;
    $("input[name='Amount[]']").each(function() {
      sum += +$(this).val();
    });
    $("#SchTotal").val(sum);
  })

$(function() {
  $('#txtDate, #follow_Date, .ND').keyup(function() {

    // Clear rows
    var trLength = $('body #appendRows tr').length;
    for (var i = 1; i < trLength; i++) {
      $('#appendRows tr:nth-child(2)').remove();
    }

    var val = (!$(".ND").val()) ? 1 : val = $(".ND").val();
    var m = $("#follow_Date").val();
    var j = $("#TDAmt").val();
    //var total = val * j;

    // $("#SchTotal").val(total);
    var k = document.getElementById('txtDate').value;

    var currentDate = moment(k);

    for (i = 0, len = val; i < val; ++i) {
      var newdate = currentDate.add(parseInt(m), 'days');
      var html = $("#appendRows tr:first-child").clone();
      html.find("input").val("");
      html.find('input[name^="Sno"]').val(i + 1);
      //html.find('input[name^="Amount"]').val();
      // I format this to make it clear
      html.find('input[name^="Date"]')
        .val(newdate.format('DD/MM/YYYY'));
      $('#appendRows').append(html);

    }

    // Remove that first row
    $("#appendRows tr:first-child").remove();
  });
});
$(function() {
	$(document).on("input", ".form-control", function() {
  	var sum = 0;
    $("input[name='Amount[]']").each(function() {
      sum += +$(this).val();
    });
    $("#SchTotal").val(sum);
  })
  $('#but').click(function() {
    var sum = 0;
    $("input[name='Amount[]']").each(function() {
      sum += +$(this).val();
    });
    $("#SchTotal").val(sum);
  });
});

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

  <label class="col-lg-1 control-label" id="pd">Due Start:</label>
  <div class="col-lg-3">
    <div class="row">
      <div class="col-lg-4">
        <input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Date&hellip;" id="txtDate" name="TDDate" value="2018/12/12">
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="form-group">
    <fieldset>
      <label class="col-lg-1 control-label" id="pd">Due Amount:</label>
      <div class="col-lg-3">
        <div class="row">
          <div class="col-lg-9">

            <input type="text" placeholder="Due Amount" name="TDAmt" id="TDAmt" class="form-control input-xs sum2">
          </div>

        </div>
      </div>

  </div>

</div>
</fieldset>

<div class="col-md-2">
  <div class="form-group">
    <fieldset>
      <label class="col-lg-1 control-label" id="pd">Mode:</label>
      <div class="col-lg-3">
        <div class="row">
          <div class="col-lg-4">
            <input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
          </div>
        </div>
      </div>

      <label class="col-lg-1 control-label" id="pd">Rows:</label>
      <div class="col-lg-3">
        <div class="row">
          <div class="col-lg-4">
            <input type="number" class="ND" placeholder="Number of rows" name="TMode" class="form-control input-xs Mode">
          </div>
        </div>
      </div>

    </fieldset>
  </div>
</div>


<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
  <thead>
    <tr>

      <th>Sno</th>
      <th>Date</th>
      <th>Amount</th>
      <th>Bank Name</th>
      <th>Chqamt</th>
      <th>Payable</th>
      <th>Bank1</th>
      <th>Chqamt1</th>
      <th>Payable1</th>
    </tr>
  </thead>
  <tbody id="appendRows">
    <tr>

      <td><input style="width:40px" type="text" class="form-control" name="Sno[]" value="1" id="Sno"></td>

      <td><input style="width:80px" type="text" class="form-control" name="Date[]" value="" id="Date"></td>

      <td> <input style="width:70px" type="text" class="form-control" name="Amount[]" value="" id="Amount"></td>

      <td><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>

      <td><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>

      <td><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>

      <td><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>

      <td><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>

      <td><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>



    </tr>
  </tbody>
</table>
<div class="col-xs-6">

  <div class="form-group "><br>
    <input type="button" id="but" value='Calculate'>
    <label class="col-md-4 control-label">Total:</label>
    <div class="col-md-4">

      <input type="text" placeholder="Your Amount" class="form-control input-xs" id="SchTotal" name="total1">
    </div>

  </div>
</div>

已更新 fiddle