Javascript Jquery添加和删除表行

我有一个html表，可以使用jQuery动态添加和删除行。行数受jQuery计数器的限制，该计数器允许用户最多添加4行。我的问题是，当用户创建第4行时，他们已经达到了限制，但是当他们删除一行时，限制仍然存在，并且他们无法添加更多的行

HTML

<table id="myTable" class="order-list">
<thead>
    <tr>
        <td>Name</td>
        <td>Price</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type="text" name="name" />
        </td>
        <td>
            <input type="text" name="price1" />
        </td>
        <td><a class="deleteRow"></a>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="5" style="text-align: left;">
            <input type="button" id="addrow" value="Add Row" />
        </td>
    </tr>
    <tr>
        <td colspan="">Grand Total: $<span id="grandtotal"></span>

        </td>
    </tr>
</tfoot>

名称
价格
总计：$

JQUERY

$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
    var counter = $('#myTable tr').length - 2;
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" name="price' + counter + '"/></td>';

    cols += '<td><input type="button" id="ibtnDel"  value="Delete"></td>';
    newRow.append(cols);
    if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("change", 'input[name^="price"]', function (event) {
    calculateRow($(this).closest("tr"));
    calculateGrandTotal();
});

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
});

});

function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
    grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}

$（文档）.ready（函数（）{
var计数器=0；
$（“#添加行”）。在（“单击”上，函数（）{
var计数器=$（'#myTable tr'）。长度-2；
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+=''；
cols+=''；
newRow.append（cols）；
if（counter==4）$（'#addrow'）.attr（'disabled'，true）.prop（'value'，'youhavehavedthelimit'）；
$（“table.order list”）.append（newRow）；
计数器++；
});
$（“table.order list”）。在（“更改”上，输入[name^=“price”]”，函数（事件）{
计算器低（$（此）.tr）；
calculateGrandTotal（）；
});
$（“table.order list”）。在函数（事件）上（“单击”和“#ibtnDel”）{
$（this）.tr.remove（）；
calculateGrandTotal（）；
});
});
函数计算器OW（行）{
var price=+row.find（'input[name^=“price”]”）。val（）；
}
函数calculateGrandTotal（）{
var-grandTotal=0；
$（“table.order list”）.find（'input[name^=“price”]”）。每个（函数（）{
grandTotal++$（this.val（）；
});
$（“#grandtotal”）.text（grandtotal.toFixed（2））；
}

删除行时，只需重新启用按钮并减小计数器：

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter--;
    $('#addrow').prop('disabled', false).prop('value', "Add row");
});

一堆修复程序

已删除删除按钮的额外处理程序

将按钮ID更改为类，因为不应重复ID

添加了启用“添加行”按钮的逻辑。请参见

删除了添加行处理程序中的var声明以更新全局var

---

单击删除btn，您应该减少计数器编号并启用buton和属性值

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter = counter-1;
    $("#addrow").attr("disabled", false).prop("value", "Add Row")

});

---

我更新了你的javascript请看fiddle上的代码：

$（“table.order list”）。在函数（事件）上（“单击”和“#ibtnDel”）{
$（this）.tr.remove（）；
calculateGrandTotal（）；
计数器--；
if（counter<5）$（'#addrow'）.attr（“disabled”，false）.prop（'value'，“addrow”）；
});

---

问题是，您没有正确地倒计时，并且没有调用您的删除按钮方法。

非常感谢您的帮助和快速响应！！这很好用。@nallad1985您不应该重复ID。。请改用类选择器。感谢您提供的额外详细信息和帮助。

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter = counter-1;
    $("#addrow").attr("disabled", false).prop("value", "Add Row")

});

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter --;
    if (counter < 5) $('#addrow').attr("disabled", false).prop('value', "Add Row");
});