jQuery implementiert dynamische Tag-Ereignisse

jQuery implementiert dynamische Tag-Ereignisse

In diesem Artikel wird der spezifische Code von jQuery zum dynamischen Hinzufügen von Tag-Ereignissen zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Code:

<Text>
    <table id="tableID" border="1" align="center" width="60%">
        <tr>
            <th>Benutzername</th>
            <th>Passwort</th>
            <th>Betrieb</th>
        </tr>
        <tbody id="tbodyID"></tbody>
    </Tabelle>
    <hr />
    Benutzername:
    <input type="text" id="usernameID" /> Passwort:
    <input type="text" id="Passwort-ID" />
    <input type="button" value="Hinzufügen" id="addID" />
</body>
<Skripttyp="text/javascript">
    //Suchen Sie die Schaltfläche „Hinzufügen“ und fügen Sie ein Klickereignis hinzu $("#addID").click(function() {
        //Werte von Benutzername und Passwort abrufen var username = $("#usernameID").val();
        var Passwort = $("#Passwort-ID").val();
        //Leerzeichen auf beiden Seiten entfernen username = $.trim(username);
        Passwort = $.trim(Passwort);
        //Wenn der Benutzername oder das Passwort nicht ausgefüllt ist if (username.length == 0 || password.length == 0) {
            //Benutzerwarnung ausgeben („Benutzername oder Passwort nicht eingegeben“);
        } anders {
            //Erstellen Sie ein tr-Tag var $tr = $("<tr></tr>");
            //3 td-Tags erstellen var $td1 = $("<td>" + username + "</td>");
            var $td2 = $("<td>" + Passwort + "</td>");
            var $td3 = $("<td></td>");
            //Erstellen Sie ein Eingabetag und legen Sie es als Löschschaltfläche fest var $del = $("<input type='button' value='Delete'>");
            //Dynamisch ein Klickereignis für die Löschtaste hinzufügen $del.click(function() {
                //Alle Zeilen der Schaltfläche löschen, d. h. das $tr-Objekt $tr.remove();
            });
            //Fügen Sie dem td3-Tag die Schaltfläche „Löschen“ hinzu $td3.append($del);
            //Füge nacheinander 3 td-Tags zum tr-Tag hinzu $tr.append($td1);
            $tr.append($td2);
            $tr.append($td3);
            //Fügen Sie das tr-Tag zum tbody-Tag hinzu $("#tbodyID").append($tr);
            // Inhalt der Textfelder „Benutzername“ und „Passwort“ löschen $("#usernameID").val("");
            $("#passwortID").val("");
        }
    });
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Die Verwendung von jQuery zum Simulieren des Klickereignisses des A-Tags kann die Sprunglösung nicht erreichen
  • Zusammenfassung mehrerer Möglichkeiten zum Binden von Ereignissen an dynamisch generierte Tags mit jQuery
  • jQuery fügt dynamisch li-Tags hinzu und fügt Attribute hinzu und bindet Ereignismethoden
  • Detaillierte Erläuterung von jQuery unbind zum Löschen von Bindungsereignissen/Entfernen von Tags
  • jQuery bindet Klickereignis an einen Tag-Beispielcode
  • Der jQuery-Trigger fälscht das Klickereignis des a-Tags, um die Methode window.open zu ersetzen.
  • Verwenden Sie JS oder jQuery, um einen Mausklick auf einen Tag-Ereigniscode zu simulieren
  • jQuery löst einen Tag-Jump-Event-Beispielcode aus
  • So verwenden Sie das s:radio-Tag von Struts2 und fügen mit jQuery ein Änderungsereignis hinzu
  • JQuery bindet das Onchange-Ereignis des Auswahl-Tags, zeigt den ausgewählten Wert an und implementiert Sprung- und Parameterübertragung

<<:  MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen

>>:  Beheben Sie das Problem, dass der Docker-Container das externe Netzwerk nicht anpingen kann

Artikel empfehlen

Tiefgreifendes Verständnis von Worker-Threads in Node.js

Inhaltsverzeichnis Überblick Die Geschichte der C...

CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“

1. Schwebendes Layout 1. Lassen Sie zuerst das Di...

Beispielcode für ein großes Dropdown-Menü, implementiert in reinem CSS

Dies ist ein großes Dropdown-Menü, das rein in CS...

Tipps zum MySQL-Abfragecache

Inhaltsverzeichnis Vorwort Einführung in QueryCac...

Vue+js realisiert Video-Ein- und Ausblendeffekte

Vue+js realisiert das Ein- und Ausblenden des Vid...

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Herkunft Zurzeit arbeite ich an Anforderung A, in...

Ausführliches Tutorial zur Installation von MySQL 8.0.19 (Windows 64 Bit)

Inhaltsverzeichnis MySQL initialisieren MySQL-Die...

Detaillierte Erläuterung gängiger Methoden von JavaScript Array

Inhaltsverzeichnis Methoden, die das ursprünglich...

Detaillierte Erklärung der scp- und sftp-Befehle unter Linux

Inhaltsverzeichnis Vorwort 1. SCP-Nutzung 2. Verw...

So legen Sie einen gepunkteten Rahmen in HTML fest

Verwenden Sie CSS-Stile und HTML-Tag-Elemente Um ...

Erklären Sie anhand eines Diagramms, was Web 2.0 ist

Heutzutage sprechen wir oft über Web 2.0. Was als...

Die vue-cli-Konfiguration verwendet den vollständigen Prozessdatensatz von Vuex

Inhaltsverzeichnis Vorwort Installation und Verwe...