javascript - Jquery 只添加一行而不是 4 行

Question

您好，有人可以帮我解决这个代码吗:这就是 Blade

       <table class="optionsForm" style="width:100%">
        <thead>
          <tr >
           <th><button  type="button" class="add">Add</button></th>  
           @for($c = 1; $c<=4; $c++)
                <th id="column{{ $c}}">   
                  <input type="text" name="columns[{{ $c }}]"  
                  class="form-control" placeholder="Column {{ $c }} "> 
                </th> @endfor
                 <th><button type="button" style="width: 100px; height: 25px" class="addColumn">Add Column</button></th>

              </tr> 
              </thead> 
              <tbody> @for($r = 1; $r<=4; $r++)
              <tr class="prototype">

        </tr>  @endfor
                  </tbody>
                </table> 

这是js代码，我只需要添加一行，这里添加4行，我需要首先显示4行，但是当我单击添加时，我只需要添加一行我怎样才能实现这一目标，有人可以帮助我解决这件事吗？我陷入困境，非常感谢您的努力。

 $(document).ready(function () {
    var id = 0;
    // Add button functionality
    $("table.optionsForm button.add").click(function () {
        id++;
        var master = $(this).parents("table.optionsForm");
        // Get a new row based on the prototype row
        var prot = master.find(".prototype").clone();
        prot.attr("class", "")
        prot.find(".id").attr("value", id);
        master.find("tbody").append(prot);
    });

    // Remove button functionality
    $("table.optionsForm button.remove").on("click", function () {
        $(this).parents("tr").remove();

    });

    $("table.optionsForm button.addColumn").click(function () {
        var $this = $(this), $table = $this.closest('table')


        $('<th><input type="text" name="options"   class="form-control" placeholder="Column"></th>').insertBefore($table.find('tr').first().find('th:last'))

        var idx = $(this).closest('td').index() + 1;
        $('<td><input type="radio" name="col' + idx + '[]" value="" /</td>').insertBefore($table.find('tr:gt(0)').find('td:last'))
    });
});

Answer 1

添加按钮代码正在创建具有“prototype”类的四个元素的集合，然后克隆四个元素:

var prot = master.find(".prototype").clone()

要添加单个元素，请尝试从集合中选择第一个 DOM 元素并将其转换为 JQuery 对象，然后再应用克隆:

 var prot = $(master.find(".prototype")[0]).clone()

<小时/> 作为最小测试/演示案例(不使用 Blade )

var master = $("#master");
var prot = $(master.find(".prototype")[0]).clone();
master.append(prot);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="master">
<span class="prototype">proto 1</span><br>
<span class="prototype">proto 2</span><br>
<span class="prototype">proto 3</span><br>
<span class="prototype">proto 4</span><br>
</div>