0

我刚刚开始学习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>

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

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

4

3 回答 3

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();
            },
于 2011-03-08T09:30:10.927 回答
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" );
                }
            }
        });     
});
});
于 2011-03-08T09:34:11.860 回答
0

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

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

            });

});
});
于 2011-12-04T02:37:17.987 回答