jquery添加和删除表格行

我有一个html表格，动态地添加和删除jQuery的行。行数受jQuery计数器限制，允许用户添加最多4行。我的问题是，当用户创建第四行时，他们已经达到了限制，但是当他们删除一行时，限制仍然存在，他们不能添加更多的行。jquery添加和删除表格行

http://jsfiddle.net/nallad1985/sqrrt/

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

来源

2013-04-24 nallad1985

束修复，

取消了删除按钮
改变按钮ID来上课，你不应该重复ID额外的处理程序。 Read why you should not duplicate ID。
添加了启用添加行按钮的逻辑。见Fixed fiddle。
删除VAR声明中添加行处理程序，以更新全局变量

http://jsfiddle.net/sqrrt/2/

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

    counter -= 1 
    $('#addrow').attr('disabled', false).prop('value', "Add Row"); 
});

来源

2013-04-24 19:09:02

感谢您的额外细节和帮助。 – nallad1985 2013-04-24 19:23:12

你只需要重新启用按钮和减少合作温特，当你删除行：

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

来源

2013-04-24 19:06:51

非常感谢您的帮助和快速响应！这是完美的。 – nallad1985 2013-04-24 19:17:58

@ nallad1985你不应该重复ID ..使用类选择器。 – 2013-04-24 19:20:08

在点击删除BTN你应该减少你的柜台号码并启用了布通和属性值

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

});

来源

2013-04-24 19:18:38 Mahipal

我更新了你的javascript请看看小提琴上的代码：

http://jsfiddle.net/sqrrt/3/

$("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"); 
});

的问题是，你没有正确的倒计时计数器和你的删除按钮的方法并没有被调用。

来源

2013-04-24 19:38:38 MentholBonbon

jquery添加和删除表格行

回答

相关问题