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:
|
<<: Einführung und Anwendungsbeispiele von ref und $refs in Vue
Artikel empfehlen
JavaScript-Implementierung des klassischen Schlangenspiels
In diesem Artikel wird der spezifische JavaScript...
Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen
1|0 Kompilieren Sie den Kernel (1) Führen Sie den...
Grafisches Tutorial zur Installation und Konfiguration des MySQL Community Server 8.0.16 unter Windows
Ich habe in letzter Zeit viel MySQL-bezogene Synt...
Grundkenntnisse zu MySQL – Lernhinweise
Datenbank anzeigen show databases; Erstellen eine...
Der Unterschied zwischen HTML-Frame, Iframe und Frameset
10.4.1 Der Unterschied zwischen Frameset und Fram...
MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]
Inhaltsverzeichnis 1. Konzept 2. Umgebungsbeschre...
Beispiele für JavaScript-Entschüttelungen und Drosselung
Inhaltsverzeichnis Stabilisierung Drosselung: Ant...
Analyse der zum Ausführen von Docker erforderlichen Berechtigungen
Zum Ausführen von Docker sind Root-Rechte erforde...
Einführung in die Cloud-native-Technologie Kubernetes (K8S)
Inhaltsverzeichnis 01 Was ist Kubernetes? 02 Der ...
Websocket+Vuex implementiert eine Echtzeit-Chat-Software
Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...
Eine kurze Diskussion darüber, wie man Div und Tabelle auswählt und kombiniert
Das Seitenlayout war mir schon immer ein Anliegen...
Zusammenfassung häufig verwendeter MySQL-Befehle im Linux-Betriebssystem
Hier sind einige gängige MySQL-Befehle für Sie: -...
So konfigurieren Sie eine JDK-Umgebung unter Linux
1. Gehen Sie zur offiziellen Website, um das JDK-...
Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten
Inhaltsverzeichnis Vorwort Untergeordnete Kompone...
Implementierungscode der HTML-Floating-Promptbox-Funktion
Allgemeine Formulareingabeaufforderungen belegen ...