javascript - 将动态创建的输入中的值复制到文本区域

Question

我有 3 列的引导行。每列都有输入。我有“添加行”按钮，它添加另一行 3 列。每个输入值都复制到文本区域。但我有问题。我只能从第一行复制值。如何从所有输入复制值？第二个问题，我怎样才能像这样格式化输出

第 1 行 数据-1 数据-2 数据-3

第2行 数据-4 数据5 数据-6

<div class="container">
<div class="row inputs">
    <div class="col-sm-4">
        <input type="text" name="szerokosc" class="entry" id="szerokosc_1" value="" />
    </div>
    <div class="col-sm-4">
        <input type="text" name="wysokosc" class="entry" id="wysokosc_1" value="" />
    </div>
    <div class="col-sm-4">
        <input type="text" name="dlugosc" class="entry" id="dlugosc_1" value="" />
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <button id="add">add row</button>
    </div>
</div>
</div>
<textarea class="box" name="result" rows="5"> </textarea>

$('#add').click(function(){
$('.row.inputs:last').clone().insertAfter(".row.inputs:last").val('');
});
$("input").on('keyup',function() {
    var values = "";
    $("input:text").each(function(i) {
        var text=$(this).prev("label").text();
        values +=  (i > 0 ? "\n" : "") + this.value+ " "+text;
    });
    $("textarea").val(values);
});

Answer 1

这是您要找的吗？

否，要使新添加的输入也触发我们的 keyup，请将 $("input").on('keyup', function() { 更改为 $(document).on('keyup', "input", function() {

$('#add').click(function() {
  $('.row.inputs:last').clone().insertAfter(".row.inputs:last");
  $('.row.inputs:last input').val("")
  console.log($(".row.inputs").length)
  if ($(".row.inputs").length == 2){
  $('.row.inputs:last .col-sm-4:last').css("float","left").after('<div><button style="margin-left: 20px" class="removeRow">remove row</button></div>')
  } 
    
});
$(document).on('keyup', "input", function() {
  updateTextarea()
});

$(document).on('click', ".removeText", function() {
  $(this).prev("input").val("")
  updateTextarea()
});

$(document).on('click', ".removeRow", function() {
  $(this).closest(".row").remove()
  updateTextarea()
});

function updateTextarea() {
  var values = "";
  $(".row.inputs").each(function(i) {
    values += "row" + (i + 1) + ": "
    $(this).find("input").each(function(x, e) {
      $(this).next("button").css("display", this.value.length > 0 ? "initial": "none")
      var text = $(this).prev("label").text();
      values += this.value + " " + text;
    })

    values += "\n"
  });
  $("textarea").val(values);
}

textarea {
  height: 200px;
  width: 400px;
}

.removeText{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row inputs">
    <div class="col-sm-4">
      <input type="text" name="szerokosc" class="entry" id="szerokosc_1" value="" /><button class="removeText">remove text</button>
    </div>
    <div class="col-sm-4">
      <input type="text" name="wysokosc" class="entry" id="wysokosc_1" value="" /><button class="removeText">remove text</button>
    </div>
    <div class="col-sm-4">
      <input type="text" name="dlugosc" class="entry" id="dlugosc_1" value="" /><button class="removeText">remove text</button>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <button id="add">add row</button>
    </div>
  </div>

  <textarea row="10"></textarea>