Javascript 如何使用jquery添加带有行的移除和添加按钮？

我想添加删除和添加按钮，行上的字段像鼠标一样悬停

但我的动态字段是在点击

按钮时生成的
我可以为以上链接设计做哪些更改？
这是我的密码：

<tr>         
     <td colspan=7 width=800><div id="input1" style="margin-bottom:4px;" class="clonedInput"><select class="items" name="items" style="width:127px; float:left;" id="items"><option value="1" selected="selected" disabled="disabled"></option></select>
     <textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;"></textarea>
     <input type="text" name="unitprice" id="unitprice" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;">
     <input type="text" name="quantity" id="quantity" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;">
     <select name="firsttax" id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;"><option value="1" selected="selected" ></option></select>
     <select name="secondtax" id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select>
     <input type="text" name="linetotal" id="linetotal" class="linetotal" placeholder="0.00" readonly style="float:right; display: block; height: 31px; width:107px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -31px -1px 0;">


     </div>
     </td></tr>

这是我的按钮：

<input type="button" class="btn btn-success" id="btnAdd" value="Add Row" />
<input type="button" class="btn btn-danger" id="btnDel" value="Remove Row" />

像这样的东西怎么样：


jQuery（document）.on（“ready”，function（））{
initAddRows（）；
});
函数initAddRows（）{
var template=jQuery（“#template”），
dataRows=jQuery（“#dataRows”）；
jQuery（#btnAdd”）。在（“单击”，函数（）上{
var newRow=template.clone（true，true），
fieldRows=dataRows.find（“.fieldRow”）；
newRow.attr（'id'，'row'+（fieldRows.length+1））.find（'[id]'）。each（function（）{
jQuery（this.attr（“id”），jQuery（this.attr（“id”）+（fieldRows.length+1）；
});
fieldRows.filter（“：last”）。在（newRow）之后；
});
dataRows.on（“单击“，”.remove”，函数（）{
jQuery（this.parent（）.remove（）；
});
}
.fieldRow{
边缘底部：20px；
溢出：隐藏；
}
.fieldRow.field{
浮动：左；
裕度：0 10px 0 0；
}
.fieldRow选择.field{
填充：1px；
}
巴顿霍尔德先生{
边框顶部：实心5px#ccc；
填充：10px；
}
#template.button.remove{
显示：无；
}

价值
价值
价值
好吧，这个问题很酷。：）
这是解决办法

HTML标记

<div class="formContainer">
    <div class="row">
        <div class="flt">
            <select name="items" id="items">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt"><textarea name="description" id="description"></textarea></div>
        <div class="flt"><input type="text" name="unitprice" id="unitprice" /></div>
        <div class="flt"><input type="text" name="quantity" id="quantity" /></div>
        <div class="flt">
            <select name="firsttax" id="firsttax">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt">
            <select name="secondtax" id="secondtax">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt"><input type="text" name="linetotal" id="linetotal" readonly /></div>
        <div class="flt"><input type="button" class="addRow" name="addRow" value="+" /></div>
        <div class="flt"><input type="button" class="removeRow" name="removeRow" value="-" /></div>
        <div class="clr"></div>
    </div>
</div>

和JavaScript:

$(function(){
    var rowItem = $(".row");

    $(".formContainer").on("click", ".addRow", function(){
        var newItem = rowItem.clone(),
            rowIndex = $(".row").length;

        $(":input", newItem).each(function(c, obj){
            $(obj).attr("id", $(obj).attr("name") + rowIndex);
        });
        //$(this).parent().parent().after(newItem); // adds just after the current line
       $(".formContainer").append(newItem); // adds At the end of the container
    })
    .on("click", ".removeRow", function(){
        if($(".row").length > 1){
            $(this).parents(".row").remove();
        }
    });
});

有两种方法可以添加行：

如果要在当前行之后添加
如果要在表单末尾添加行
这两个都在上面的JS中，（其中一个现在已经被评论过了）

以下是工作演示：

如果您喜欢动画，可以查看此动画：

.fieldRow {
        margin-bottom: 20px;
        overflow: hidden;
    }
    .fieldRow .field {
        float: left;
        margin: 0 10px 0 0;
    }
    .fieldRow select.field {
        padding: 1px;
    }
    .buttonHolder {
        border-top: solid 5px #ccc;
        padding: 10px;
    }
    #template .button.remove {
        display: none;  
    }

$(function(){
    var rowItem = $(".row");

    $(".formContainer").on("click", ".addRow", function(){
        var newItem = rowItem.clone(),
            rowIndex = $(".row").length;

        $(":input", newItem).each(function(c, obj){
            $(obj).attr("id", $(obj).attr("name") + rowIndex);
        });
        //$(this).parent().parent().after(newItem); // adds just after the current line
       $(".formContainer").append(newItem); // adds At the end of the container
    })
    .on("click", ".removeRow", function(){
        if($(".row").length > 1){
            $(this).parents(".row").remove();
        }
    });
});