Javascript 单击链接创建新表单

我如何才能使下面的代码保留现在的功能，但执行以下操作：

a） 单击添加菜单链接/按钮时，显示

bookingName

菜单

div

以及相同的项目和数量框

b） 当上述情况发生时，它还需要能够向刚刚添加的特定菜单添加更多行

jQuery:

$(document).ready(function () {

    $('<tr/>', {
        'class': 'menuDetails',
        html: getMenuHTMLDetails()
    }).appendTo('#addMoreItemsButton');
    $('#addItem').click(function () {
        $('<tr/>', {
            html: getMenuHTMLDetails()
        }).hide().appendTo('.menuDetailsBlock').slideDown('slow');
    });
})

function getMenuHTMLDetails() {
    var $clone = $('.menuDetails').clone();

    $clone.find('[name="item[]"]')[0].name = "item";
    $clone.find('[name="qty[]"]')[0].name = "qty";
    return $clone.html();
}

      <div class="formBlock">
            <p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
      </div>

<div class="formBlock">

<table class="menuDetailsBlock">
<tr>
<td><span class="bookingName">Item<span class="required">*</span></span></td>
<td><span class="bookingName">QTY<span class="required">*</span></td>
</tr>
<tr class="menuDetails">
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
</table>

    <div class="appendMoreItems"></div>
</div>
  <div class="formBlock">
              <a href="#" id="addItem">Add Item</a> <a href="" id="addMenu">Add Menu</a>
  </div>
        </div> 

$（文档）.ready（函数（）{
$('', {
'class'：'menuDetails'，
html:getMenuHTMLDetails（）
}).appendTo（'addMoreItemsButton'）；
$（'#addItem'）。单击（函数（）{
$('', {
html:getMenuHTMLDetails（）
}).hide（）.appendTo（'.menuDetailsBlock'）.slideDown（'slow'）；
});
})
函数getMenuHTMLDetails（）{
var$clone=$（'.menuDetails'）.clone（）；
$clone.find（'[name=“item[]”]'）[0].name=“item”；
$clone.find（'[name=“qty[]”]）[0].name=“qty”；
返回$clone.html（）；
}

HTML:

$(document).ready(function () {

    $('<tr/>', {
        'class': 'menuDetails',
        html: getMenuHTMLDetails()
    }).appendTo('#addMoreItemsButton');
    $('#addItem').click(function () {
        $('<tr/>', {
            html: getMenuHTMLDetails()
        }).hide().appendTo('.menuDetailsBlock').slideDown('slow');
    });
})

function getMenuHTMLDetails() {
    var $clone = $('.menuDetails').clone();

    $clone.find('[name="item[]"]')[0].name = "item";
    $clone.find('[name="qty[]"]')[0].name = "qty";
    return $clone.html();
}

      <div class="formBlock">
            <p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
      </div>

<div class="formBlock">

<table class="menuDetailsBlock">
<tr>
<td><span class="bookingName">Item<span class="required">*</span></span></td>
<td><span class="bookingName">QTY<span class="required">*</span></td>
</tr>
<tr class="menuDetails">
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
</table>

    <div class="appendMoreItems"></div>
</div>
  <div class="formBlock">
              <a href="#" id="addItem">Add Item</a> <a href="" id="addMenu">Add Menu</a>
  </div>
        </div> 

菜单*

项目*
数量*

您应该注意的第一件事是您的html无效。你不能有这样的东西：

<td><span>...</td><td>...</span></td>

。。。。。。

因为这个表单需要能够被复制，所以您需要删除所有ID（理想情况下，将其更改为类）。e、 g.

id=“addMenu”

->

class=“addMenu”

您应该使用委托来处理外部容器中的任何单击，而不是使用标准的单击处理程序

关于复制问题，将元素的模板放置在一个脚本标签中，复制一个ID，你可以引用和克隆（用<代码> .HTML*）/代码>，或者，更好的是，考虑查看或.