通过PHP / jQuery获取动态创建的行的值

Question

我需要获取每个动态创建的行的值并打印这些值。当前代码的作用是它可以提醒所有添加的值或打印到控制台。现在，我该如何打印这些值？

例如，用户又添加了一行并选择了以下内容：

用户点击获取值后，必须将所有值（Female，Lady，Male和Schertz）打印到生成的表格，页面应如下所示：

现在我所拥有的是以下代码。

HTML视图：

<button>Add More Order</button>
<button>Delete Added Order</button>

<div id="wrap" class="order-container">
  <p>       
    <select class="getThis">
      <option>--Gender--</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>   
    <input type="text" class="getThis" placeholder="Name"/>
  <br>
  </p>
</div>

  <input type="submit" id="getValues" value="Get Values"></input>

jQuery的：

$(document).ready(function(){

    //Add new row   
    $("button:nth-of-type(1)").click(function(){
        $("#wrap").append("<p><select class='getThis'><option>--Gender--</option><option>Male</option><option>Female</option></select><input type='text' class='getThis' placeholder='Name'/><br></p>").trigger('create');
    });

    //Remove last added row
    $("button:nth-of-type(2)").click(function(){
        $("p:last-of-type").remove();
    });

//alert values
$("#getValues").click(function() {
        $(".getThis").each(function() {
           var getThis =  $(this).val();
           //console.log(getThis);
           alert(getThis);

     });

  });

}); // Document Ready End

这是演示的JSfiddle。

有什么想法吗？ Kamsahamnida！

Answer 1

试试这个：

 $("#getValues").click(function() {
    $("select.getThis").each(function() {
       var getThis =  $(this).val();
       $(this).next().val(getThis);
 });});

<强> Working Demo

Answer 2

试

document.getElementById('getValues').value;

Answer 3

将您的输入类更改为其他内容，因为它可能会开始调整，然后尝试：

$("#getValues").click(function() {
  $(".getThis").each(function() {
    var getThis =  $(this).val();
    $(this).closest("p").find("input[type='text']").val(getThis);
  });
});

它的作用是从当前目标到最近的父段落标记，并从那里找到输入[type =＆＃39; text＆＃39;]并为其赋值

Answer 4

您可以使用例如：

DEMO

$("#getValues").click(function () {
        var $table = $('#resultTable').length ? $('#resultTable').find('tr:gt(0)').remove().end() : $('<table/>').append('<tr><th>Gender</th><th>Name</th>').appendTo('body').attr('id', 'resultTable');
        var getValues = $("p:has(select.getThis)").find('select.getThis').map(function () {
            return {
                gender: this.value,
                name: $(this).next().val()
            }
        }).get();
        $.each(getValues, function (_, fields) {
            $table.append($('<tr/>', {
                html: '<td>' + fields.gender + '</td><td>' + fields.name + '</td>'
            }))
        });
    });