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 installieren Sie ElasticSearch auf Docker in einem Artikel

JavaScript generiert dynamisch eine Tabelle mit Zeilenlöschfunktion

Umsetzungsideen

Codebeispiel

So installieren Sie ElasticSearch auf Docker in einem Artikel

In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt

Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind

Analysieren Sie die Kompilierung und das Brennen des Linux-Kernels und des Gerätebaums

Detaillierte Erklärung des Prinzips und der Funktion des Vue-Listen-Rendering-Schlüssels

Detaillierte Erklärung zur Verwendung von Join in Mysql

So verwenden Sie libudev in Linux, um die VID und PID eines USB-Geräts abzurufen

Beispielcode zur Implementierung eines bildadaptiven Containers mit CSS

Detaillierte Erklärung der Text-Fill-Color-Eigenschaft in CSS3

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

Artikel empfehlen

Einführung in den B-Tree-Einfügeprozess

So konfigurieren Sie eine JDK-Umgebung unter Linux

Analyse des Problems des Datenverlusts durch erzwungene Aktualisierung von Vuex

Eine kurze Diskussion über den Werttransfer zwischen Vue-Komponenten (einschließlich Vuex)

Einfacher Vergleich von Meta-Tags in HTML

Mac VMware Fusion CentOS7 Konfiguration statisches IP-Tutorial-Diagramm

Vue verwendet Regeln zur Implementierung der Formularfeldvalidierung

JS-Operationsobjekt-Array zum Erreichen von Beispielcode zum Hinzufügen, Löschen, Ändern und Abfragen

CnBlogs - Teilen im benutzerdefinierten Blogstil

Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7

Detaillierte Erklärung des Befehls zum Anzeigen von Protokolldateien in der Linux-Umgebung

Detaillierte Erläuterung der mysql5.6 Master-Slave-Einrichtung und asynchroner Probleme

Probleme bei der Installation von TensorRT im Docker-Container

So installieren Sie OpenSuse auf Virtualbox

Ubuntu 18.04 installiert MySQL 5.7.23