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

Docker löst das Problem, dass das Terminal kein Chinesisch eingeben kann

Vorwort: Eines Tages baute ich einen MySQL-Dienst...

Beispielcode zur Implementierung von dynamischem Skinning mit vue+element

Manchmal kann das Thema eines Projekts nicht jede...

MySQL-Lernaufzeichnung: Blutiger Vorfall durch KEY-Partition verursacht

Nachfragehintergrund Ein Teil der Daten in der Ge...

JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle

In diesem Artikel wird der spezifische Code für J...

Vue implementiert eine Wettervorhersagefunktion

In diesem Artikel wird der spezifische Code von V...

MySQL-Datenbank-Grundlagen SQL-Fensterfunktion Beispielanalyse-Tutorial

Inhaltsverzeichnis Einführung Einführung Aggregat...

So verwenden Sie Docker+DockerCompose zum Kapseln von Webanwendungen

Inhaltsverzeichnis Technologie-Stack Backend-Buil...

jquery+springboot realisiert die Datei-Upload-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Zusammenfassung und Beispiele der Kommunikationsmethoden für Vue3-Komponenten

Die Kommunikationsmodi der Vue3-Komponenten sind ...

So installieren Sie MySQL 8.0.17 und konfigurieren den Fernzugriff

1. Vorbereitung vor der Installation Überprüfen S...

JavaScript zum Implementieren der Anzeige von Suchdaten

In diesem Artikel wird der Datenanzeigecode für d...