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

So stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit

Benutzerdefinierte Vue-Anweisungen zum Erzielen eines vierseitigen Streckungs- und diagonalen Streckungseffekts beim Ziehen von Popup-Fenstern

Artikel

Zwei Implementierungen des Front-End-Routings von Vue-Router

JavaScript generiert dynamisch eine Tabelle mit Zeilenlöschfunktion

Umsetzungsideen

Codebeispiel

So stellen Sie mit Docker schnell einen Elasticsearch-Cluster bereit

Lösen Sie das Problem der Ausführung von „Hello World“ nach der Docker-Installation

JDBC-Idee: MySQL importieren, um Java-JAR-Paket zu verbinden (Mac)

Tipps und Vorsichtsmaßnahmen zur Verwendung des MySQL-Index

Benutzerdefinierte Vue-Anweisungen zum Erzielen eines vierseitigen Streckungs- und diagonalen Streckungseffekts beim Ziehen von Popup-Fenstern

Zwei Implementierungen des Front-End-Routings von Vue-Router

Angular-Leistungsoptimierung: Komponenten von Drittanbietern und Lazy-Loading-Technologie

Schritte zur Verwendung von autoconf zum Generieren von Makefile und Kompilieren des Projekts

So weisen Sie einer Instanz in Linux eine öffentliche IP-Adresse zu

Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung

Artikel empfehlen

Tutorial zur Verwendung des Hyperlink-Tags in HTML

Werbefähigkeiten im Baidu Union-Umfeld (grafisches Tutorial)

Beispielcode zur Implementierung eines Karten-Wasserfall-Layouts mit CSS3-Spalten

Lösung für BT Baota Panel php7.3 und php7.4 unterstützen ZipArchive nicht

mySql SQL-Abfrageoperation für statistische Mengen

HTML-Code einer Webseite: Erzeugung von Lauftext

Detaillierte Erklärung des Missverständnisses zwischen MySQL und Oracle

Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose

Das rel-Attribut des HTML-Link-Tags

Implementierung der Docker-Compose-Bereitstellung des ZK+Kafka+Storm-Clusters

Erläuterung des Beispiels einer MySQL-Datenanalyse-Speicher-Engine

Verwendung des MySQL-Zeitstempels

Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen

So verwenden Sie Indizes zur Optimierung von MySQL ORDER BY-Anweisungen

Detaillierte Erläuterung der Schritte zur Konfiguration des Centos7-Bridge-Netzwerks unter VMware