我有一个场景,我想复制现有的 <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>
最佳答案
你可以使用这个
(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>
关于javascript - 单击图像按钮 jquery 生成 tr,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47654670/