使用模态表单确认（jQuery UI）从表中删除行？ [英] Deleting row from table with modal form confirmation (jQuery UI)?

问题描述

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

I have just started to study jQuery and it seems to be full of opportunities, if I can just learn it.

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

I have created a table with the last cell containing delete-button. By clicking the button I'll like to have an confirmation dialog to appear and if the user accepts the row will be deleted. Cancel just closes the confirm dialog.

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

But I have no idea how to do that, even after reading many examples posted here in stackoverflow or in other sites as well. I just couldn't adapt those to my project. So, I love to have guidance for this matter.

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

My script looks like this now:

<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包含以下内容：

An the html contains these:

<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>

通过单击确认对话框打开的删除按钮，可以很好地完成表格。

This will work nicely to get the table done and by clicking the delete button that confirm dialog opens.

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

So can you help me to delete the row where the user clicked it?

推荐答案

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

First, IDs should be unique. Especially when you add jQuery triggers to them.

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

For example, this is how I would have done this : 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：

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

这篇关于使用模态表单确认（jQuery UI）从表中删除行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！