Question

我正在开发Billing System，我有一个下拉列表，其中包含很多项目和前面的文本框，这是该项目的价格。

每次使用添加按钮时，我都会调用新的下拉列表和文本框。

＆＃13;

var i = 1;
var j = 11;
$(".btnAdd").click(function() {
  i += 1;
  j += 1;
  $('#myDiv').after('<div class="row"><div class="col"><select id="' + i + '" style="width: 130px"><option value="val1">a</option><option value="val2">b</option><option value="val3">c</option><option value="valn">z</option></select><input type="text" id="' + j + '" /> </div></div>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="row">
  <div class="col">
    <select id="  1  " style='width: 130px'>
      <option value='val1'>a</option>
      <option value='val2'>b</option>
      <option value='val3'>c</option>
      <option value='valn'>z</option>
    </select>
    <input type="text" id="  11  " name="txt" />
  </div>
</div>
<button class="btnAdd">Add</button>
<div>
  <input type="text" id=" totval  " name="txt" />
  <button class="Submit">Total</button>
</div>

＆＃13;

我的问题是如何在单击TOTAL按钮时添加所有值并存储在TOTAL文本框中？请帮帮我...

检查这个问题 - ＆gt; https://fiddle.jshell.net/e20hc1wo/2/

Answer 1

试试这个Fiddle

＆＃13;

 var i = 1;
 var j = 11;
 $(".btnAdd").click(function() {
   i += 1;
   j += 1;
   $('#myDiv').after('<div class="row"><div class="col"><select id="' + i + '" style="width: 130px"><option value="val1">a</option><option value="val2">b</option><option value="val3">c</option><option value="valn">z</option></select><input type="text" id="' + j + '" /> </div></div>');
 });
 $('.Submit').on('click', function() {
   var total = 0;
   $('input[type=text]').not('#totval').each(function(index, item) {
     total += parseInt($(item).val());
   });
   $('#totval').val(total);
 })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="myDiv" class="row">
  <div class="col">
    <select id="  1  " style='width: 130px'>
      <option value='val1'>a</option>
      <option value='val2'>b</option>
      <option value='val3'>c</option>
      <option value='valn'>z</option>
    </select>
    <input type="text" id="  11  " name="txt" />
  </div>
</div>
<button class="btnAdd">Add</button>
<div>
  <input type="text" id="totval" name="txt" />
  <button class="Submit">Total</button>
</div>

＆＃13;

Answer 2

实现总和是可能的：

$(".Submit").click(function () {
    var total = 0;
    $("input:not(#totval)").each(function (_, e) {
        total += parseInt(e.value, 10)
    });
    $("#totval").val(total);
});

小提琴：https://fiddle.jshell.net/e20hc1wo/12/

但是我认为如果你为这些创建的输入添加有意义的类，代码可以得到很大的改进。

改进：以下实现使用模板行来避免在JS中连接HTML代码。

<div class="row template">
    <div class="col">
        <select class="typeSelect" style='width: 130px'>
            <option value='val1'>a</option>
            <option value='val2'>b</option>
            <option value='val3'>c</option>
            <option value='valn'>z</option>
        </select>
        <input type="text" class="numberInput" />
    </div>
</div>
<button class="btnAdd">Add</button>
<div>
    <input type="text" id="totval" name="txt" />
    <button class="Submit">Total</button>
</div>

JS：

var template = $(".template").remove();
$(".btnAdd").click(function () {
    template.clone(true).insertBefore('.btnAdd');
}).click();
$(".Submit").click(function () {
    var total = 0;
    $(".numberInput").each(function (_, e) {
        total += parseInt(e.value, 10)
    });
    $("#totval").val(total);
});

它更短更清洁

小提琴：https://fiddle.jshell.net/e20hc1wo/23/

Answer 3

将ID添加到按钮

<button class= "Submit" id="btnTotal">Total</button>

将功能添加到javascript

$("#btnTotal").click(function () {
var total = 0;
$(".row input").each(function(){
total += parseInt($(this).val(),10);
})    
$('#totval').val(total);
});

如何添加动态创建的Textbox的所有值

3 个答案: