javascript - 如何在单击按钮后添加新行，html jquery

Question

https://jsfiddle.net/kd4hce2o/

我有一个表格，其中有一列用于添加评论，单击按钮后如何添加新行？

该按钮是在插入新行后动态添加的，这是我的代码:

<table id="items" class="table table-bordered table-hover">
<thead>
<tr>
    <th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
    <th width="2%">AC</th>
    <th width="15%">Codigo</th>
    <th width="38%">Articulo</th>
    <th width="15%">Precio</th>
    <th width="15%">Cantidad</th>
    <th width="15%">Total</th>

</tr>
</thead>
<tbody>
<tr id="row_1">
    <td><input class="case" type="checkbox"/></td>
    <td><button class="btn btn-success addrow" type="button">AC</button></td>
    <td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
    <td><input type="text" data-type="productName" name="items[name][]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
    <td><input type="number" name="items[price][]" readonly="readonly" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
    <td><input type="number" name="items[quantity][]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
    <td><input type="number" name="items[total][]" readonly="readonly" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>

</tr>
</tbody>
</table>

这是我的脚本:

var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><button class="btn btn-success addrow" type="button" id="addrow_'+i+'">AC</button></td>';
html += '<td><input type="text" data-type="productCode" name="items[code][]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="items[name][]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text"  name="items[price][]" readonly="readonly" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text"  name="items[quantity][]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text"  name="items[total][]" readonly="readonly" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '</tr>';
$('#items').append(html);
i++;
});


$(document).on("click", '.addrow', function (){
newrow = '<tr><td colspan="7"><input type="text" class="form-control"></td></tr>';
$('#items').append(newrow);
});

Answer 1

您需要使用after 。 Fiddle .

$(document).on("click", '.addrow', function (){
    newrow = '<tr><td colspan="7"><input type="text" class="form-control"></td></tr>';
    $(this).parent().parent().after(newrow);
});