使用模态表单确认（jQuery UI）从表中删除行？

我刚刚开始学习jQuery，如果我能学到它，它似乎充满机会。

我创建了一个包含删除按钮的最后一个单元格的表。 通过单击按钮，我想要显示一个确认对话框，如果用户接受该行将被删除。 取消只关闭确认对话框。

但我不知道如何做到这一点，即使在阅读了stackoverflow或其他网站中发布的许多示例之后。 我无法将这些改编为我的项目。 所以，我喜欢为这件事提供指导。

我的脚本现在看起来像这样：

 $(document).ready(function(){ $("#dlgConfirm").hide(); }); $(function() { $("#dlgLink").click(function(){ $( "#dlgConfirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete selected toon": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); });  

一个html包含这些：

 
 
 
Toons:
 
 
 
 
Date
 
Name
 
Note
 
Delete?
 
 
 
 
 
02.03.2011
 
Michael
 
Driving with KITT
 
Delete
 
 
 
05.03.2011
 
Dredd
 
Criminal hunting
 
Delete
 
 
 
 
 
 
 
  Toon will be deleted and cannot be recovered. Are you sure? 
  

这将很好地完成表的完成，并单击确认对话框打开的删除按钮。

那么你可以帮我删除用户点击它的行吗？

Answer 1

首先，ID应该是唯一的。 特别是当你向它们添加jQuery触发器时。

例如，我就是这样做的： http ： //jsfiddle.net/Nbf9K/

HTML：

 
 
 
Toons:
 
 
 
 
Date
 
Name
 
Note
 
Delete?
 
 
 
 
 
02.03.2011
 
Michael
 
Driving with KITT
 
Delete
 
 
 
05.03.2011
 
Dredd
 
Criminal hunting
 
Delete
 
 
 
 
 
 
 
  Toon will be deleted and cannot be recovered. Are you sure? 
  

使用Javascript：

 $(document).ready(function(){ $("#dlgConfirm").hide(); }); $(function() { $(".deleteRow").click(function(){ var $row = $(this).parent('td').parent('tr'); $( "#dlgConfirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete selected toon": function() { $row.remove(); $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); }); 

Answer 2

http://api.jquery.com/closest/

http://forum.jquery.com/topic/jquery-deleting-an-entire-tr

 "Delete selected toon": function() { $( this ).dialog( "close" ); $(this).closest('tr').remove(); }, 

Answer 3

我在寻找同样的问题。 我通过一些实验找到了结果。 请注意我使用图像作为触发器。 这是我的结果：

 HTML  Jquery $(document).ready(function() { $('#table1 td img.delete').click(function(){ var x = $(this).parent().parent().parent(); $('#dialog').dialog({ buttons : { "Confirm" : function() { x.remove(); $(this).dialog("close"); }, "Cancel" : function() { $(this).dialog("close"); } } }); }); });