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
Detaillierte Schritte zum Ausführen eines Springboot-Projekts in Linux Docker
Einführung: Die Konfiguration von Docker, auf dem...
Detaillierte Erläuterung der Verarbeitung der drei Docker Nginx-Protokolle
Da die Kollegen im Unternehmen die Standardausgab...
Detaillierte Erläuterung des Beispiels einer MySQL-Einzeltabellenabfrage
1. Daten vorbereiten Die folgenden Operationen we...
Eine kurze Analyse von Kubernetes-Controllern und -Labels
Inhaltsverzeichnis 01 Gemeinsame Controller in k8...
Was ist die Funktion und Schreibreihenfolge der Pseudoklasse eines Tags?
Die Rolle der A-Tag-Pseudoklasse: ":link"...
Implementierung von Linux-Dateisystemvorgängen
In dieser Lesenotiz werden hauptsächlich die Vorg...
Müssen die Texte der Website noch gestaltet werden?
Viele fragen sich vielleicht: Muss der Text auf d...
Verwendung von benutzerdefinierten Nginx-Variablen und integrierten vordefinierten Variablen
Überblick Nginx kann Variablen verwenden, um die ...
Detaillierte Erklärung des Prinzips und der Funktion des JavaScript-Closures
Inhaltsverzeichnis Einführung Verwendung von Vers...
Vue realisiert Click-Flip-Effekt
Verwenden Sie Vue, um einfach einen Click-Flip-Ef...
vue-pdf realisiert Online-Dateivorschau
In diesem Artikelbeispiel wird der spezifische Co...
LINUX Prüft, ob der Port belegt ist
Ich konnte nie herausfinden, ob der Port belegt i...
MySQL-Experiment: Verwenden von Explain zur Analyse des Indextrends
Überblick Die Indizierung ist eine Fähigkeit, die...
Chrome 4.0 unterstützt GreaseMonkey-Skripte
GreaseMokey (die Chinesen nennen es Grease Monkey...
MySQL 8.0.18 verwendet Klon-Plugin, um die MGR-Implementierung neu zu erstellen
Angenommen, ein Knoten im Drei-Knoten-MGR ist abn...