我想做的是在表中添加数据后,我可以选择是否在操作列中删除它。
我的问题是,如果我在要删除的特定行上按下删除按钮,它会删除表中不应删除的一些内容。有时它会删除表格的所有内容。
脚本:http://jsfiddle.net/4GP2h/5/
oTable = $('#myTable').dataTable();
var data = [
$('#name').val(),
$('#age').val(),
$("#gender:checked").val(),
"<button class='delete'>Delete</button>"
];
oTable.fnAddData(data);
$('.delete').click(function(){
var row = $(this).closest('tr');
oTable.fnDeleteRow(row[0]);
});
最佳答案
每次您创建一行时,您都会在已经存在的删除操作之上绑定(bind)另一个 delete
事件。因此,如果您在行中创建 3 个项目,则删除绑定(bind)如下所示:
ROW1 // <- Deletes on ROW1 'Delete' clicks
ROW2 // <- Deletes on ROW1, ROW2 'Delete' clicks
ROW3 // <- Deletes on ROW1, ROW2, ROW3 'Delete' clicks
所以点击 ROW1 上的delete
基本上也会对之后创建的每一行调用 delete。
解决方法是将您的 $('.delete').click(function(){...});
代码移到 save
事件之外,这样您每次保存/添加新行时都不会堆叠在删除绑定(bind)上。
而且,由于您正在动态添加新的 DOM 元素,我们希望以稍微不同的方式监视删除事件,以便我们可以将 delete
代码绑定(bind)到任何新添加的按钮/行。
现在你的代码应该是这样的:
// Moved outside save function to reference other places
oTable = $('#myTable').dataTable();
$('#Save').click(function () {
if ($('#name').val() == '' || $('#age').val() == '' || $("input[name='gender']:checked").val() == undefined) {
$("#dialog-confirm").dialog("open");
} else {
var data = [
$('#name').val(),
$('#age').val(),
$("#gender:checked").val(),
"<button class='delete'>Delete</button>"];
oTable.fnAddData(data);
}
});
// Moved outside save function and changed how the event bindings occur
$(document).on('click', '.delete', function () {
var row = $(this).closest('tr');
oTable.fnDeleteRow(row[0]);
});
可以看到工作版本here
关于javascript - 删除数据表中的特定行时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24681641/