Jquery 添加和删除表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16200104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery add and remove table rows
提问by nallad1985
I have a html table that dynamically adds and removes rows with jQuery. The number of rows is limited by jQuery counter which allows a user to add up to 4 rows. My problem is that when a user creates the 4th row they have reached the limit but when they delete a row the limit still remains in place and they can't add any more rows.
我有一个 html 表，它使用 jQuery 动态添加和删除行。行数受 jQuery 计数器的限制，它允许用户最多添加 4 行。我的问题是，当用户创建第 4 行时，他们已经达到了限制，但是当他们删除一行时，限制仍然存在并且他们无法添加更多行。
http://jsfiddle.net/nallad1985/sqrrt/
http://jsfiddle.net/nallad1985/sqrrt/
HTML
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));
}
回答by Selvakumar Arumugam
Bunch of fixes,
一堆修复，
- Removed extra handler for delete button
- change button ID to class as you should not duplicate ID. Read why you should not duplicate ID.
- Added logic to enable the Add row button. See Fixed fiddle.
- Removed var declaration inside Add Row handler to update the global var
- 删除了删除按钮的额外处理程序
- 将按钮 ID 更改为类，因为您不应重复 ID。阅读为什么不应该重复 ID。
- 添加了启用添加行按钮的逻辑。见固定小提琴。
- 删除了添加行处理程序中的 var 声明以更新全局 var
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
counter -= 1
$('#addrow').attr('disabled', false).prop('value', "Add Row");
});
回答by Anthony Grist
You just need to re-enable your button and decrement the counter when you delete a row:
您只需要重新启用按钮并在删除行时减少计数器：
$("table.order-list").on("click", "#ibtnDel", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
counter--;
$('#addrow').prop('disabled', false).prop('value', "Add row");
});
回答by Mahipal
On click on delete btn you should decrease your counter number and enabled the buton and property value
单击删除 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")
});
回答by MentholBonbon
I updated your javascript please look at the code on fiddle:
我更新了您的 javascript 请查看小提琴上的代码：
$("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");
});
The problem was, that you did not properly count down the counter and your method for the delete-button did not get called.
问题是，您没有正确地对计数器进行倒计时，并且您的删除按钮方法没有被调用。
