使用jQuery动态添加/删除行

我正在使用jQuery动态添加/删除行

jQuery代码如下所示：

$(document).ready(function() {
    var i = 1;
    $('#add_row').click(function() {
        $('#addr' + i).html("<td>&nbsp;" + (i + 1) + "&nbsp;</td><td><input class='tbl_text' maxlength='250' name='invoiceNo[]' size='25' style='text-transform:uppercase' type='search' required /></td><td><input class='date' max='2099-12-31' name='date[]' onkeydown='return false' type='date' required /></td><td><input class='tbl_text' maxlength='500' name='desc[]' size='50' type='search' required /></td><td><input class='amt' name='amt[]' step='0.01' type='number' required /></td>");
        $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
        i++;
    });

    $('#delete_row').click(function() {
        if (i > 0) {
            $('#addr' + i).remove();
            calculateSum();
            i--;
        }
    });
});

    <table align="center" border="1" class="table table-bordered table-hover" id="tab_logic" style="border:2px solid black;border-collapse:collapse">
<thead>
<tr>
<th width="25" />&nbsp;
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Description</th>
<th>Amount S$<br>(Including GST)</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>&nbsp;1&nbsp;</td>
<td align="center"><input class="tbl_text" maxlength="250" name="invoiceNo[]" size="25" style="text-transform:uppercase" type="search" required /></td>
<td align="center"><input class="date" max="2099-12-31" name="date[]" onkeydown="return false" type="date" required /></td>
<td align="center"><input class="tbl_text" maxlength="500" name="desc[]" size="50" type="search" required /></td>
<td align="center"><input class="amt" id="amt" name="amt[]" step="0.01" type="number" required /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
<tr>
<td colspan="5" height="5" style="border:none;" />
</tr>
<tr>
<td align="right" colspan="5" height="50" style="border:none;"><button class="button" id="add_row" type="button">Add Row</button><span style='display:inline-block;width:1em;'>&nbsp;</span><button class="button_cancel" id="delete_row" type="button">Delete Row</button><span style='display:inline-block;width:0.5em;'>&nbsp;</span></td>
</tr>
<tr>
<td colspan="5" height="5" style="border:none;" />
</tr>
<tr height="50" id="summation">
<td class="label" colspan="4">&nbsp;Total Amount Payable</td>
<td align="right" class="label"><span id="sum">$0.00</span></td>
</tr>
</table>

$（文档）.ready（函数（）{
var i=1；
$（“#添加_行”）。单击（函数（）{
$（'#addr'+i）.html（“+（i+1）+”）；
$（'#tab_logic'）。追加（''）；
i++；
});
$（“#删除_行”）。单击（函数（）{
如果（i>0）{
$（'#addr'+i）.remove（）；
计算um（）；
我--；
}
});
});

HTML如下所示：

$(document).ready(function() {
    var i = 1;
    $('#add_row').click(function() {
        $('#addr' + i).html("<td>&nbsp;" + (i + 1) + "&nbsp;</td><td><input class='tbl_text' maxlength='250' name='invoiceNo[]' size='25' style='text-transform:uppercase' type='search' required /></td><td><input class='date' max='2099-12-31' name='date[]' onkeydown='return false' type='date' required /></td><td><input class='tbl_text' maxlength='500' name='desc[]' size='50' type='search' required /></td><td><input class='amt' name='amt[]' step='0.01' type='number' required /></td>");
        $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
        i++;
    });

    $('#delete_row').click(function() {
        if (i > 0) {
            $('#addr' + i).remove();
            calculateSum();
            i--;
        }
    });
});

    <table align="center" border="1" class="table table-bordered table-hover" id="tab_logic" style="border:2px solid black;border-collapse:collapse">
<thead>
<tr>
<th width="25" />&nbsp;
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Description</th>
<th>Amount S$<br>(Including GST)</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>&nbsp;1&nbsp;</td>
<td align="center"><input class="tbl_text" maxlength="250" name="invoiceNo[]" size="25" style="text-transform:uppercase" type="search" required /></td>
<td align="center"><input class="date" max="2099-12-31" name="date[]" onkeydown="return false" type="date" required /></td>
<td align="center"><input class="tbl_text" maxlength="500" name="desc[]" size="50" type="search" required /></td>
<td align="center"><input class="amt" id="amt" name="amt[]" step="0.01" type="number" required /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
<tr>
<td colspan="5" height="5" style="border:none;" />
</tr>
<tr>
<td align="right" colspan="5" height="50" style="border:none;"><button class="button" id="add_row" type="button">Add Row</button><span style='display:inline-block;width:1em;'>&nbsp;</span><button class="button_cancel" id="delete_row" type="button">Delete Row</button><span style='display:inline-block;width:0.5em;'>&nbsp;</span></td>
</tr>
<tr>
<td colspan="5" height="5" style="border:none;" />
</tr>
<tr height="50" id="summation">
<td class="label" colspan="4">&nbsp;Total Amount Payable</td>
<td align="right" class="label"><span id="sum">$0.00</span></td>
</tr>
</table>

发票号。
发票日期
描述
金额S$
（包括GST）
1.
添加行删除行
应付总额
$0.00

它正在工作，但有时，我需要在执行功能之前单击按钮两次&有时我只需要单击一次

---

我遗漏了什么吗？任何建议，请，谢谢。

您能显示您的html代码吗？当您删除行时，您总是删除最后一行？您不应该直接使用

单击
，而应该使用
$（文档）。在（“click”、“#addr”+i，function（）{…}）
，这是jQuery捕捉DOM中项目事件的正确方法。@Romainbiard OP不是单击“添加+i”，而是单击（猜测）单个“删除”行-没有HTML，无法分辨，但不在.HTML中provided@Frenchy这非常混乱-在add_行上，它们添加到现有行（假设存在一行）然后添加一个没有任何单元格的新空行-在“删除”行上，他们删除最后一个空/无单元格行。看起来像
$（“#tab_logic”）。append
需要在
$（“#addr”+i）之前。html
-具有相应的
i
/
（i+1）
修复。然后一切都会好起来的。就我个人而言，我会将delete放在行上，否则，即使它有效，它仍然会从最后一行删除。