如何添加动态创建的文本框的所有值

How to add all the values of dynamically created Textbox

本文关键字：文本 创建 动态 何添加 添加      更新时间：2023-09-26

我在计费系统工作，在那里我有一个下拉菜单，其中包括很多项目和一个文本框在它的前面，这是该项目的价格。

我调用新的下拉框和文本框每次使用添加按钮。

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>');
});
<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>

我的问题是如何添加所有的值时，TOTAL按钮被点击并存储在TOTAL文本框?请在这件事上帮帮我。

检查此提琴-> https://fiddle.jshell.net/e20hc1wo/2/

试试这个小提琴

 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);
 })
<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>

实现sum是可能的:

$(".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/

添加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);
});
相关文章：