Question

我正在制作包含HTML，PHP和jQuery的发票页面。我正在尝试按钮将新项目添加到发票中。按下按钮以添加新项目时，应在现有项目下方插入新的.row。以下是需要添加的html代码段

<div class="row" id="div4">
    <div class="col-md-2">
        <input type="text" id="inputItem" placeholder="Item #4" class="form-control">
    </div>
    <div class="col-md-6">
        <input type="text" id="inputItem" placeholder="Description" class="form-control">
    </div>
    <div class="col-md-1">
        <input type="text" id="inputItem" placeholder="Qty." class="form-control">
    </div>
    <div class="col-md-1">
        <input type="text" id="inputItem" placeholder="Tax" class="form-control">
    </div>
    <div class="col-md-2">
        <input type="text" id="inputItem" placeholder="Item Total" class="form-control">
    </div>
</div>

#div4是最后一行的id。

我已经尝试过jQuery代码。

<script>
    $(document).ready(function() {
        $("#add").click(function() {
            $("#div4").append("cant get html below to replicate");
        });
    });
</script>

提前感谢任何帮助都会很棒。

Answer 1

如果我理解正确，你可以尝试这样的事情假设以下是添加新项目的按钮，

<input type='button' id='addrow' value='Add item' />

脚本

$('#add').click(function(){
  var n= $('.row').length+1;
  var temp = $('.row:first').clone();
  $('input:first',temp).attr('placeholder','Item #'+n)
  $('.row:last').after(temp);
});

Demo

旁注：您需要从动态模板中移除id，您可以使用常见的class。

制作发票并尝试使用jQuery添加新行

1 个答案: