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

Grafisches Tutorial zur Installation von Linux CentOS6.9 unter VMware

Als technischer Neuling zeichne ich den Vorgang d...

Beispielcode zum Setzen von Hotlinks und Koordinatenwerten für Webbilder

Manchmal müssen Sie mehrere Bereiche auf einem Bi...

Kurze Analyse von CentOS 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

Baidu Cloud-Festplatte: Link: https://pan.baidu.c...

17 hervorragende Webdesigns, sorgfältig von Startups entwickelt

Startups überraschen uns oft mit ihren unkonventi...

Saubere XHTML-Syntax

Das Schreiben von XHTML erfordert eine saubere HTM...

Detaillierte Erklärung der Rolle des neuen Operators in Js

Vorwort Js ist heutzutage die am häufigsten verwe...

Rankings zur Benutzerfreundlichkeit chinesischer Websites

<br />Die Benutzererfahrung wird von chinesi...

Verwendung von „Select“, „Distinct“ und „Limit“ in MySQL

Inhaltsverzeichnis 1. Einleitung 2. auswählen 2.1...

Das WeChat-Applet wählt die Bildsteuerung

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung des Unterschieds zwischen Vue-Lebenszyklus

Lebenszyklusklassifizierung Jede Komponente von V...