Удаление строки из таблицы с подтверждением модальной формы (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

Во-первых, идентификаторы должны быть уникальными.Особенно, когда вы добавляете к ним триггеры 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");
    }
  }

            });

});
});