Question

（代码段未以准确的形式显示表单）

countTab2 = 0;
$(".add-customs").click(function() {
  customsTable();
});

function customsTable() {
  var markup =
    "<div class='col-md-1'>Custom</div>" +
    "<div class='col-md-4'><input id='customReason" +
    countTab2 +
    "' type='text' value='' class='txt form-control'" +
    "name='customReason' path='customReason' /></div>" +
    "<div class='col-md-2'><input type='text' class='txt form-control'" +
    "name='customAmount' id='customAmount" +
    countTab2 +
    "'></div>" +
    "<div class='col-md-2'><input type='text' class='txt form-control'" +
    "name='customPenalty' id='customPenalty" +
    countTab2 +
    "'></div>" +
    "<div class='col-md-1'><span id='sum'></span></div>" +
    "<div class='col-md-2'></div>";
  countTab2++;
  $(".custom-table").append(markup);
}




//adding row for VAT
countTab3 = 0;
$(".add-vat").click(function() {
  customsTable1();
});

function customsTable1() {
  var markup =
    "<div class='col-md-1'>VAT</div>" +
    "<div class='col-md-4'><input id='vatReason" +
    countTab3 +
    "' type='text' value='' class='txt1 form-control'" +
    "name='vatReason' /></div>" +
    "<div class='col-md-2'><input type='text' class='txt1 form-control'" +
    "name='vatAmount' id='vatAmount" +
    countTab3 +
    "'></div>" +
    "<div class='col-md-2'><input type='text' class='txt1 form-control'" +
    "name='vatPenalty' id='vatPenalty" +
    countTab3 +
    "'></div>" +
    "<div class='col-md-1'><span id='sum'></span></div>" +
    "<div class='col-md-2'></div>";
  countTab3++;
  $(".vat-table").append(markup);
}


//adding row for Excise
countTab4 = 0;
$(".add-excise").click(function() {
  customsTable4();
});

function customsTable4() {
  var markup =
    "<div class='col-md-1'>Excise</div>" +
    "<div class='col-md-4'><input id='exciseReason" +
    countTab4 +
    "' type='text' value='' class='txt2 form-control'" +
    "name='exciseReason' /></div>" +
    "<div class='col-md-2'><input type='text' class='txt2 form-control'" +
    "name='exciseAmount' id='exciseAmount" +
    countTab4 +
    "'></div>" +
    "<div class='col-md-2'><input type='text' class='txt2 form-control'" +
    "name='excisePenalty' id='excisePenalty" +
    countTab4 +
    "'></div>" +
    "<div class='col-md-1'><span id='sum'></span></div>" +
    "<div class='col-md-2'></div>";
  countTab4++;
  $(".excise-table").append(markup);
}


$(".txt,.txt1,.txt2").keyup(calculateSums);

function calculateSums() {
  var names = ["", "1", "2"];
  var sum = 0;
  var total = 0;
  for (var i = 0; i < names.length; i++) {
    sum = 0;
    $(".txt" + names[i]).each(function() {
      if (!isNaN(this.value) && this.value.length != 0) {
        sum += parseFloat(this.value);
      }
    });
    $("#sum" + names[i]).html(sum);
    total += sum;
  }
  $("#tot").html(total);
  console.log(total);
}

<!DOCTYPE html>
<html>
<head>
	<title></title>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="form-group row">


  <div class="col-md-1"></div>
  <div class="col-md-4">
    <label>Reason</label>
  </div>
  <div class="col-md-2">
    <label>Amount</label>
  </div>
  <div class="col-md-2">
    <label>Penalty</label>
  </div>
  <div class="col-md-1">Total</div>
  <div class="col-md-2">Action</div>
</div>
<div class="custom-table row">
  <div class="col-md-1">
    <label>Customs</label>
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" id="customReason" name="customReason" />
  </div>
  <div class="col-md-2">
    <input type="number" class="form-control txt" id="customAmount" name="customReason" min="0" />
  </div>
  <div class="col-md-2">
    <input type="number" class="form-control txt" id="customPenalty" name="customPenalty" min="0" />
  </div>
  <div class="col-md-1">
    <span id="sum">0</span>
  </div>
  <div class="col-md-2">
    <button class="add-customs">+</button>
  </div>
</div>

<div class="vat-table row">
  <div class="col-md-1">
    <label>VAT</label>
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" id="vatReason" name="vatReason" />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control txt1" id="vatAmount" name="vatAmount" min="0" />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control txt1" id="vatPenalty" name="vatPenalty" min="0" />
  </div>
  <div class="col-md-1">
    <span id="sum1">0</span>
  </div>
  <div class="col-md-2">
    <button class="add-vat">+</button>
  </div>
</div>

<div class="excise-table row">
  <div class="col-md-1">
    <label>Excise</label>
  </div>
  <div class="col-md-4">
    <input type="text" class="form-control" id="exciseReason" name="exciseReason" />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control txt2" id="exciseAmount" name="exciseAmount" min="0" />
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control txt2" id="excisePenalty" name="excisePenalty" min="0" />
  </div>
  <div class="col-md-1">
    <span id="sum2">0</span>
  </div>
  <div class="col-md-2">
    <button class="add-excise">+</button>
  </div>


 
</div>

</body>
</html>

我的页面在初次加载时如下所示：

当我单击“ +” 按钮时，将出现新的动态输入字段，当我在“金额”和“罚金”中输入值时，其总计就没有了。

我尝试放置上一个输入字段的类，并且生成的那些新字段相同，因此出现了它们各自行的总和，但是没有来。我找不到的代码有什么问题？

javascript中无法出现的两个动态输入字段的总计计算

0 个答案: