Question

我有一个用于添加注释的列的表，如何在单击按钮后添加新行？

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

<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);
});

Answer 2

您要添加的行已损坏。此外，请确保在控制台中使用快速$加载jQuery以查看它是否已定义。如果您将上述$(".addmore").on('click',function(){更改为$(document).on('click', '.addrow', function(){并删除下面使用的那个，那么您将拥有新的，美观的行，并且每一行的事件监听器都能正常工作

小东西：var html = '<tr>';和var newrow = ...。他们是当地的变种。

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

2 个答案: