点击图片按钮jQuery生成tr

Question

我有一种情况，当我单击+按钮时，我想复制现有的<tr> ： <i class="fa fa-plus" aria-hidden="true"></i>

以下是我的<tr> 。 如何使用jQuery或JavaScript生成此

 <tr>
    <td>
        <div class="row noPadding vendorForm">
            <div class="vendorDaterow">
                <div class="vendorName">
                    <label>SP Vender Name</label><span>Shri Kamalkanth Co.</span>
                </div>
                <div class="vendorFromDate">
                    <label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                </div>
                <div class="vendorToDate">
                    <label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                </div>
            </div>
            <div class="add">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </div>
            <i class="max">(Maximum 5 Vendors)</i>

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

Answer 1

您首先要通过最接近的（）找到克隆（）父<tr/> ，然后通过insertAfter（）将其作为同级插入。 确保也将true作为参数传递，以便所有后代及其事件和数据一起传递。

$('.add').on('click', function() {
  var $tr = $(this).closest('tr');

  $tr.clone(true, true).insertAfter($tr)
});

Answer 2

你可以用这个

 (function () { var toAddCloneCount = 2; $('.add').on('click', function() { var $tr = $(this).closest('tr'); var $tr2 = $tr.clone(true, true); $tr2.find(".vendorName").children('label').remove(); $tr2.find(".add").children().remove(); $tr2.find(".vendorFromDate").children('label').remove(); $tr2.find(".vendorToDate").children('label').remove(); $tr2.find('#txtVendorName').prop('id', 'txtVendorName' + toAddCloneCount); $tr2.find('#spFromDate1').prop('id', 'spFromDate' + toAddCloneCount); $tr2.find('#spToDate1').prop('id', 'spToDate' + toAddCloneCount++); $tr2.insertAfter($tr); }); })(); 

 .vendorName,.vendorFromDate,.vendorToDate{ width:33%;float:left;} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <div class="row noPadding vendorForm"> <div class="vendorDaterow"> <div class="vendorName"> <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" name="nmVendorData" id="txtVendorName" /></span> </div> <div class="vendorFromDate"> <label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span> </div> <div class="vendorToDate"> <label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span> </div> </div> <div class="add"> <i class="fa fa-plus" aria-hidden="true"></i> </div> <i class="max">(Maximum 5 Vendors)</i> </div> </td> </tr> </table> 

Answer 3

使用clone()和after() ：

 $(document).ready(function(){ $("i.fa-plus").click(function(){ var val = $("tr:last").clone() $("tr:last").after(val) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <div class="row noPadding vendorForm"> <div class="vendorDaterow"> <div class="vendorName"> <label>SP Vender Name</label><span>Shri Kamalkanth Co.</span> </div> <div class="vendorFromDate"> <label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span> </div> <div class="vendorToDate"> <label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span> </div> </div> </div> </td> </tr> </table> <div class="add"> <i class="fa fa-plus" aria-hidden="true">+</i> </div> <i class="max">(Maximum 5 Vendors)</i> 

Answer 4

您需要以某种方式<tr>的模板。 使用某种模板引擎或惰性方式：在页面加载时复制它。 （复制<tr>时没有现有输入）

var $template = $('yourTrSelector').clone();

然后将其粘贴在按钮单击上。

$('yourButtonSelector').on('click', function(){
  $('yourTableSelector').append($template.copy());
});