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

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 2

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

            });

});
});

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

3 个答案: