使用模式表單確認（jQuery UI）從表中刪除行？

Question

我剛開始學習jQuery，它似乎充滿了機會，如果我可以學習它。

我用最後一個包含刪除按鈕的單元格創建了一個表格。通過點擊按鈕，我想要出現一個確認對話框，如果用戶接受該行將被刪除。取消只是關閉確認對話框。

但我不知道如何做到這一點，即使閱讀了很多例子在這裏發佈在stackoverflow或其他網站以及。我無法適應這些對我的項目。 所以，我很樂意爲此事提供指導。

我的腳本現在看起來是這樣的：

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

的HTML中包含這些：

<div class="modalForm"> 
     <div id="toons-contain" class="ui-widget"> 
      <h1>Toons:</h1> 
      <table id="toons" class="ui-widget ui-widget-content"> 
       <thead> 
        <tr class="ui-widget-header "> 
         <th class="date">Date</th> 
         <th class="name">Name</th> 
         <th class="note">Note</th> 
         <th class="del">Delete?</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id="row_1"> 
         <td>02.03.2011</td> 
         <td>Michael</td> 
         <td>Driving with KITT</td> 
         <td><a href="#" id="dlgLink" class="ui-state-default ui-corner-all">Delete</a></td> 
        </tr> 
        <tr id="row_2"> 
         <td>05.03.2011</td> 
         <td>Dredd</td> 
         <td>Criminal hunting</td> 
         <td><a href="#" id="dlgLink" class="ui-state-default ui-corner-all">Delete</a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
</div> 
<div id="dlgConfirm" title="Delete the selected toon?"> 
    <p> 
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span> 
    Toon will be deleted and cannot be recovered. Are you sure? 
    </p> 
</div> 

這將很好地工作，以獲得表完成並通過點擊刪除按鈕確認對話框打開。

那麼你能幫我刪除用戶點擊它的那一行嗎？

Answer 1

首先，ID應該是唯一的。特別是當你添加jQuery觸發器給他們。

例如，這是我怎麼會做這樣的：http://jsfiddle.net/Nbf9K/

HTML：

<div class="modalForm"> 
     <div id="toons-contain" class="ui-widget"> 
      <h1>Toons:</h1> 
      <table id="toons" class="ui-widget ui-widget-content"> 
       <thead> 
        <tr class="ui-widget-header "> 
         <th class="date">Date</th> 
         <th class="name">Name</th> 
         <th class="note">Note</th> 
         <th class="del">Delete?</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id="row_1"> 
         <td>02.03.2011</td> 
         <td>Michael</td> 
         <td>Driving with KITT</td> 
         <td><a href="#" class="deleteRow ui-state-default ui-corner-all">Delete</a></td> 
        </tr> 
        <tr id="row_2"> 
         <td>05.03.2011</td> 
         <td>Dredd</td> 
         <td>Criminal hunting</td> 
         <td><a href="#" class="deleteRow ui-state-default ui-corner-all">Delete</a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
</div> 
<div id="dlgConfirm" title="Delete the selected toon?"> 
    <p> 
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span> 
    Toon will be deleted and cannot be recovered. Are you sure? 
    </p> 
</div> 

的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 
<a href="#" id="opener" name ="<? echo $id ?>"><img src="/images/icon_remove.gif" class="delete"></a> 


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

      }); 

}); 
});