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

JavaScript-Entwurfsmuster, Befehlsmuster

Lösung für die Fehlermeldung "java.sql.SQLException: Incorrect string value:'\xF0\x9F\x92\xA9\x0D\x0A...'" beim Speichern von Emoticons in MySQL

Vorwort Dieser Artikel stellt hauptsächlich die L...

JavaScript generiert dynamisch eine Tabelle mit Zeilenlöschfunktion

Umsetzungsideen

Codebeispiel

JavaScript-Entwurfsmuster, Befehlsmuster

Zusammenfassung und ausführliche Erläuterung der Docker-Container-Bedienungsanleitung

Detaillierte Erläuterung zur Lösung des Zirkelreferenzproblems bei der Verwendung von JSON.stringify

Vue implementiert QR-Code-Scanfunktion (mit Stil)

Was sind die Verwendungszwecke von Limits in MySQL (empfohlen)

So aktualisieren Sie v-for in Vue

Tkinter verwendet JS-Canvas, um Farbverlaufsfarben zu erzielen

Gerätetreiber des Linux-Kernels – Zusammenfassung der grundlegenden Hinweise zum Linux-Kernel

So erstellen Sie eine automatisierte Bereitstellungsumgebung für Docker, Jenkins und Node.js von Grund auf

CSS erreicht hochadaptiven Vollbildmodus

Artikel empfehlen

Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012

Zwei Methoden zum Wiederherstellen von MySQL-Daten

Analyse der Unfallursachen durch Unicode-Signatur BOM

Detaillierte Erklärung der Lösung für das zu langsame Docker-Compose

JavaScript+HTML zur Implementierung eines Studenteninformationsmanagementsystems

Beispiele für die Verwendung einer Link-Aktualisierungsseite und einer JS-Aktualisierungsseite

Detaillierte Erklärung zum Erstellen einer aktualisierbaren Ansicht in MySQL

So fahren Sie eine MySQL-Instanz sicher herunter

Lösung für die Fehlermeldung "java.sql.SQLException: Incorrect string value:'\xF0\x9F\x92\xA9\x0D\x0A...'" beim Speichern von Emoticons in MySQL

So konfigurieren Sie eine statische Netzwerkverbindung in Linux

Detaillierte Installation und Konfiguration von hadoop2.7.2 unter Ubuntu15.10

jQuery implementiert den Fall der Schriftgrößenanpassung

Detaillierte Analyse jeder Phase der HTTP-Anforderungsverarbeitung von Nginx

Rastersysteme im Webdesign

Wie oft werden mehrere setStates in React aufgerufen?