1、html的table如下
<table id="skuTable">
<thead>
<tr>
<th width="65%"> Sku </th>
<th width="15%"> Quantity </th>
<th width="20%"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control sku-input" placeholder=" " />
</td>
<td>
<input type="text" style="height:34px; width:50px" class="amount-input" value="1" placeholder=" " />
</td>
<td>
<div class="margin-5">
<img src="/Content/images/Add.png" class="ImgAdd" />
<img class="hidden ImgReduce" src="/Content/images/Reduce.png" />
</div>
</td>
</tr>
</tbody>
</table>
2、js的代码如下
$doc.on('click', '.ImgAdd', function () {
console.log("ImgAdd");
var thisTr = $(this).closest("tr");
var nextRow = thisTr.clone(true);
nextRow.show();
var ImgReduce = $(".ImgReduce", nextRow);
ImgReduce.removeClass("hidden");
$("#skuTable").append(nextRow);
$(this).addClass("hidden");
});
$doc.on('click', '.ImgReduce', function () {
console.log("ImgAdd");
var thisTr = $(this).closest("tr");
var lastTr = thisTr.prev();
thisTr.remove();
var tr_count = $("#skuTable").find("tr").length;
console.log("tr_count=" + tr_count);
if (tr_count == 2) {
var ImgAdd = $(".ImgAdd", lastTr);
ImgAdd.removeClass("hidden");
}
});
3、效果图如下: