js generiert dynamisch Tabellen (Knotenoperationen)

In diesem Artikelbeispiel wird der spezifische Code von js zur dynamischen Generierung einer Tabelle zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Für DOM-Knotenoperationen sieht das Effektdiagramm in diesem Fall wie folgt aus (die Codemenge ist nicht groß, daher gibt es keine Trennung zwischen Struktur und Verhalten):

Native JS-Implementierung (die Methode wird in den Kommentaren erklärt):

<!DOCTYPE html>
<html>
 <Kopf>
 <meta charset="utf-8">
 <Titel></Titel>
 <style type="text/css">
 Tisch {
 Breite: 500px;
 Rand: 100px automatisch;
 Rahmen-Zusammenbruch: Zusammenbruch;
 Textausrichtung: zentriert;
 }

 td,
 das {
 Rand: 1px durchgezogen #333;
 }

 thead tr {
 Höhe: 40px;
 Hintergrundfarbe: #ccc;
 }
 </Stil>
 </Kopf>
 <Text>
 <Tabelle Zellenabstand="0">
 <Kopf>
 <tr>
  <th>Name</th>
  <th>Betreff</th>
  <th>Ergebnisse</th>
  <th>Betrieb</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </Tabelle>
 </body>
 <Skripttyp="text/javascript">
 //Da die darin enthaltenen Studentendaten dynamisch sind, benötigen wir js, um sie dynamisch zu generieren. Hier müssen wir die Daten simulieren und selbst definieren. //Wir speichern die Daten in Form von Objekten. //1 Bereiten Sie zuerst die Studentendaten vor. //2 Alle Daten werden in tbody eingefügt (wie viele Personen, wie viele Zeilen)
 var Daten = [{
 Name: 'Liu Shuxin',
 Betreff: 'JavaScript',
 Punktzahl: „100“
 }, {
 Name: 'Lied Xianglong',
 Betreff: 'JavaScript',
 Punktzahl: „80“
 },
 {
 Name: 'Cui Jian',
 Betreff: 'JavaScript',
 Punktzahl: '90'
 },
 {
 Name: 'Qie Haimiao',
 Betreff: 'JavaScript',
 Punktzahl: „70“
 }
 ];
 //Konsole.log(Daten.Länge);
 var tbody = document.querySelector('tbody');
 für (var i = 0; i < Daten.Länge; i++) {
 //Eine Zeile erstellen trs = document.createElement('tr');
 tbody.appendChild(trs);
 //Die Anzahl der von td erstellten Zellen hängt von der Anzahl der Attribute in jedem Objekt ab for(var k in datas[i]){
 //Eine Zelle erstellen var td = document.createElement('td');
 //Gib den Attributwert im Objekt an td weiter
 //Konsole.log(Daten[i][k]);
 td.innerHTML=Daten[i][k];
 trs.appendChild(td);
 }
 
 //Operation zum Löschen der Zelle erstellen var td = document.createElement('td');
 td.innerHTML='<a href="javascript:;" rel="external nofollow" >Löschen</a>'
 trs.appendChild(td);
 }
 //Löschvorgang var a=document.querySelectorAll('a');
 für(var i=0;i<a.length;i++){
 a[i].onclick=Funktion(){
 tbody.removeChild(dieser.übergeordneterNode.übergeordneterNode);
 }
 }
 </Skript>
</html>

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:

So generieren Sie dynamische Tabellen in js und fügen jeder Zelle Klickereignisse hinzu
Analyse der JS-Methode zum dynamischen Generieren von HTML-Tabellen
JS generiert dynamisch Tabellen und übermittelt Tabellendaten an das Backend
So verwenden Sie JS, um dynamisch eine Tabelle mit einer beliebigen Anzahl von Zeilen und Spalten auf einer Webseite zu generieren
js generiert dynamisch eine Tabelle mit einer bestimmten Anzahl von Zeilen
Eine in js implementierte Funktion zur automatischen Generierung einer Tabelle basierend auf dem Inhalt
Automatisches Generieren von Tabellen basierend auf JavaScript-Code
Verwenden Sie js+xml, um automatisch Tabellen zu generieren
Verwenden Sie eine Schaltfläche, um Javascript auszulösen und dynamisch einen Tabellencode zu generieren
Nodejs ruft Netzwerkdaten ab und generiert Excel-Tabellen

<<: Einführung und Anwendungsbeispiele von ref und $refs in Vue

>>: Detaillierte Erklärung der Verwendung von Vorlagen-Tags (einschließlich Zusammenfassung der Verwendung in Vue)

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

js generiert dynamisch Tabellen (Knotenoperationen)

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

So verwenden Sie den Linux-Befehl seq

Detaillierte Erklärung, wie Komponenten in React kommunizieren

Deaktivierte Werte, die nicht eingegeben werden können, können nicht an die Aktionsebene übergeben werden

MySQL-Schritte vollständig löschen

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

Durchführung der lokalen Migration von Docker-Images

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

Detaillierte Erläuterung des Prozessmanagements im Linux-System

Tutorial zur Installation von Microsoft TrueType-Schriftarten auf Ubuntu-basierten Distributionen

Artikel empfehlen

Realisieren Sie eine dreistufige Verknüpfung von Jahr, Monat und Tag basierend auf JavaScript

Zusammenfassung der Methoden zum Erstellen, Auflisten und Löschen von Docker-Containern unter Linux

Detaillierte Erklärung der dynamischen Linkbibliothek, die die C/C++-Methode in Python in Ubuntu aufruft

CSS3 verwendet scale() und rotate() zum Zoomen und Drehen

MySQL führt Befehle für externe SQL-Skriptdateien aus

So implementieren Sie adaptive Container mit gleichem Seitenverhältnis mit CSS

Transplantieren des Befehls mkfs.vfat in Busybox unter Linux

So erstellen Sie manuell ein neues Image mit Docker

Lehr- oder Lernprogramm für Webdesign

js, um einen Karusselleffekt zu erzeugen

So passen Sie geplante AT- und Cron-Aufgaben in Linux an

Beispielcode zur Implementierung des Schaltflächeneffekts „Wassertropfen-Wellenanimation“ mit CSS+JS

Implementierung von FIFO in der Linux-Prozesskommunikation

Anwendung schöner Stylesheets bei der Erstellung von XHTML+CSS-Webseiten

Lösung für „Ubuntu kann keine Verbindung zum Netzwerk herstellen“