JavaScript generiert dynamisch eine Tabelle mit Zeilenlöschfunktion

In diesem Artikelbeispiel wird der spezifische Code von Javascript zum dynamischen Generieren von Tabellen/Löschen von Zeilen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Dynamisches Generieren einer Tabelle mit der Möglichkeit zum Löschen von Zeilen:

Umsetzungsideen

1. Holen Sie sich das Tabellenelement <tbody>
2. Holen Sie sich die auszufüllenden Daten, normalerweise aus der Datenbank, oder simulieren Sie einen Datensatz zum Testen. Die Daten werden in Form von Objekten gespeichert. Mehrere Datenzeilen können in einem Array gespeichert werden, und jedes Element im Array ist ein Objekt.
3. ① Durchlaufen Sie das Objekt-Array und erstellen Sie Zeilen.
②Eine Schleife verschachteln - - -Eine Schleife durch das Objekt führen:
a. Erstellen Sie die erforderliche Anzahl von Zellen entsprechend den Attributen,
b. Und den Zellen Werte zuweisen,
c. Fügen Sie dann Zellen zur Zeile hinzu.
③Fügen Sie eine Zelle hinzu und weisen Sie einen Link mit dem Textinhalt - - - "Löschen" zu. Fügen Sie die Zelle dann der Zeile hinzu.
4. Fügen Sie tbody eine neue Zeile hinzu
5. Alle a-Elemente abrufen - -document.querySelectorAll('a'), um ein Objektarray abzurufen
6. Durchlaufen Sie das Objektarray, binden Sie das Klickereignis an den Link und fügen Sie die Löschfunktion hinzu - - -tbody.removeChild(this.parentNode.parentNode);

Codebeispiel

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Tabelle dynamisch generieren</title>
    <Stil>
        Tisch {
            Rand: 1px durchgehend rosa;
            Rahmen-Zusammenbruch: Zusammenbruch;
        }
        
        thead {
            Hintergrundfarbe: #ddd;
        }
    </Stil>
</Kopf>

<Text>
    <table border="1" cellpadding="5" cellspacing="0" align="center" width="600px">
        <Kopf>
            <tr>
                <th>Name</th>
                <th>Betreff</th>
                <th>Ergebnisse</th>
                <th>Betrieb</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </Tabelle>
    <Skript>
        var tbody = document.querySelector('tbody');

        var Liste = [{
            'Name': 'SpongeBob Schwammkopf',
            'Betreff': 'JavaScript',
            'Alter': 66
        }, {
            'Name': 'Duo Li Ai Meng',
            'Betreff': 'JavaScript',
            'Alter': 99
        }, {
            'Name': 'Stich',
            'Betreff': 'JavaScript',
            'Alter': 60
        }, {
            'Name': 'Pikachu',
            'Betreff': 'JavaScript',
            'Alter': 88
        }];

        für (var i = 0; i < Liste.Länge; i++) {
            // 1. Erstellen Sie eine Zeile var tr = document.createElement('tr');

            // 2. Daten für (var k in list[i]) { eingeben
                konsole.log(Liste[i][k]);
                // 1. Td-Zelle erstellen var td = document.createElement('td');
                //Zelleninhalt füllen td.innerHTML = list[i][k];
                // 2. Zelle hinzufügen tr.appendChild(td);
            }
            // 3. Links hinzufügen und löschen var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;" >Löschen</a>';
            tr.appendChild(td);
            // 4. Zeilen hinzufügen tbody.appendChild(tr);
        }

        // Löschfunktion hinzufügen var as = document.querySelectorAll('a');
        für (var i = 0; i < as.length; i++) {
            als[i].onclick = Funktion() {
                tbody.removeChild(dieser.übergeordneterNode.übergeordneterNode);
            }
        }

        Konsole.log(tbody.childNodes);
        Konsole.log(tbody.children);
    </Skript>
</body>

</html>

Seiteneffekt:

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:

JavaScript zum dynamischen Generieren von Tabellen auf Webseiten
Beispiel für die dynamische Generierung einer Tabelle mit JavaScript
JavaScript zum dynamischen Generieren von Tabellen
JavaScript generiert Tabellencode mit Einrückung
Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript

<<: Professionelle MySQL-Entwicklungsdesignspezifikationen und SQL-Schreibspezifikationen

>>: Ein zeitaufwändiger Fehlerbehebungsprozess für einen Docker-Fehler

Analyse des MySQL-Beispiels DTID Master-Slave-Prinzip

JavaScript generiert dynamisch eine Tabelle mit Zeilenlöschfunktion

Umsetzungsideen

Codebeispiel

Analyse des MySQL-Beispiels DTID Master-Slave-Prinzip

JavaScript zum Erzielen eines einfachen Countdown-Effekts

Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung

MySQL-Tutorial zum Bereitstellen mehrerer Instanzen auf einer einzigen Maschine mit mysqld_multi

So zeigen Sie allgemeine Symbole auf dem Desktop in Windows Server 2012 an oder verbergen sie

Verwenden von CSS3 zum Erstellen von Header-Animationseffekten

Eine kurze Einführung in die Kernkenntnisse der VUE uni-app

Detaillierte Erläuterung der Nginx-Protokollanpassung und Aktivierung des Protokollpuffers

MySQL-Triggersyntax und Anwendungsbeispiele

Vue verwendet benutzerdefinierte Anweisungen, um Wasserzeichen am unteren Seitenrand hinzuzufügen

Artikel empfehlen

So installieren Sie Jenkins auf CentOS 8

Welche Arten von MySQL-Verbindungsabfragen kennen Sie?

Detaillierte Erklärung zur Interpretation der Nginx-Konfigurationsdatei

So verwenden Sie Port 80 in Tomcat unter Linux

So legen Sie eine horizontale Navigationsstruktur in HTML fest

Detaillierte Erklärung zur Verwendung des Basis-Tags in HTML

So integrieren Sie Bilder eleganter in Vue-Seiten

Detaillierte Erläuterung der Überwachung der NVIDIA GPU-Nutzung unter Linux

So analysieren Sie die Leistung von MySQL-Abfragen

So ändern Sie den iTunes-Sicherungspfad unter Windows

Verwendung des Linux-Telnet-Befehls

Google Translate Tool: Mehrsprachige Webseiten schnell umsetzen

Übersicht über die Definition der HTC-Komponenten nach IE5.0

Die Elementbaumsteuerung integriert ein Dropdown-Menü mit Symbolen (Baum+Dropdown+Eingabe)

So ändern Sie die Apt-Get-Quelle in Ubuntu 18.04