Löschen der Zeile aus der Tabelle mit modal form der Bestätigung (jQuery-UI)?

Ich habe gerade angefangen zu studieren, jQuery und es scheint zu sein, voller Möglichkeiten, wenn ich nur lernen.

Ich habe eine Tabelle erstellt mit der letzten Zelle mit entf-Taste. Durch anklicken der Taste " ich werde wie ein Bestätigungsdialogfeld angezeigt und wenn der Benutzer akzeptiert die Zeile gelöscht werden. Abbrechen schließt einfach den dialog bestätigen.

Aber ich habe keine Ahnung, wie zu tun, dass sogar nach dem Lesen vieler Beispiele hier gepostet in stackoverflow oder in anderen Standorten auch. Ich konnte einfach nicht passen die zu meinem Projekt.
Also, ich Liebe, Anleitung für diese Sache.

Mein Skript sieht jetzt wie folgt aus:

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

Einer html enthält diese:

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

Dies wird gut funktionieren, um die Tabelle gemacht und durch klicken auf die Schaltfläche löschen bestätigen " wird geöffnet.

So können Sie mir helfen, löschen Sie die Zeile, wo der Benutzer es angeklickt?

InformationsquelleAutor Lemonius | 2011-03-08
  1. 1

    Erste, IDs sollten eindeutig sein. Vor allem, wenn Sie hinzufügen, jQuery Trigger zu Ihnen.

    Dies ist zum Beispiel, wie würde ich dies getan haben : 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" );
                }
            }
        });     
});
});
    • Okay, danke für deine Antwort. Nach der Lektüre einige mehr tutorials ich dachte auch, dass diese IDs sollten eindeutig sein, konnte es aber nicht haben, es funktioniert ohne Ihre Hilfe, wenigstens nicht so schnell 🙂
    • Ich bin froh, Sie gefunden die bugs 🙂 seien Sie vorsichtig bei der Verwendung von IDs 🙂
    InformationsquelleAutor Thomas Menga
  2. 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();
            },
    • Vielen Dank für Ihre Zeit für die Beantwortung Techism, aber nichts geschah, als ich versuchte, diese Lösung.
    InformationsquelleAutor Techism
  3. 0

    Suchte ich die gleiche Frage. Ich fand das Ergebnis durch einige Experimente. Bitte beachten Sie, dass ich ein Bild als mein Auslöser. Hier sind meine Ergebnisse:

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

            });

});
});
    InformationsquelleAutor ringocub
Schreibe einen Kommentar