Web-Frontend
js-Tutorial
So zeigen Sie eine JSON-Datei in einer Tabelle an [Implementierungscode]_Javascript-Kenntnisse
So zeigen Sie eine JSON-Datei in einer Tabelle an [Implementierungscode]_Javascript-Kenntnisse
<body>
//首先得把架子搭起来
<table id = "tb" border="1">
<tr></tr>
<tr></tr>
</table>
//js部分
<script>
//简单的json内容
var json = {"姓名":"张三","年龄":"26","性别":"男"};
//获取tr
var tr = document.getElementsByTagName('tr');
//tr1和tr2下面会用到，但是要先声明，给一个空值
var tr1 = '';
var tr2 = '';
//用for in来进行遍历，k是键，json[k]是值
for(var k in json){
tr1+='<th>'+k+'</th>';
tr2+='<td>'+json[k]+'</td>';
}
//tr1里放的是键，也就是姓名，年龄，性别，然后把这些信息放到第一个tr里
tr[0].innerHTML = tr1;
//tr2里放的是值，也就是张三，26，男，把这些信息放到第二个tr里
tr[1].innerHTML = tr2;
</script>Früher habe ich darüber nachgedacht, wie man JSON-Inhalte dynamisch in eine Tabelle einfügt? Manchmal wird mir in Interviews die Frage gestellt, wie man das mit Ajax macht. Aber ich werde hier eine einfache Demo schreiben und den vorhandenen JSON in eine Tabelle einfügen. Ich habe diese Demo mehrmals erstellt, obwohl sie jedes Mal in einem Tisch platziert ist. Es kann eine vertikale Anordnung sein, wie diese
Name
Zhang San
Alter
26
Geschlecht
Männlich
Es könnte so sein
Name
Alter
Geschlecht
Zhang San
26
Männlich
Aber das ist es, was ich will
Name Alter Geschlecht
Zhang San 26 männlich
Nach mehreren Experimenten habe ich festgestellt, dass ich Anpassungen an der HTML-Skelettstruktur vornehmen muss. Es ist nicht möglich, das Tabellen-Tag einfach an den Anfang zu setzen. Zum Schluss muss ich js verwenden zwei tr-Tags, um den gewünschten Effekt zu erzielen
Der obige Artikel zum Anzeigen einer JSON-Datei in einer Tabelle [Implementierungscode] ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie Script Home unterstützen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schritte zum Anpassen des Formats von Bildern, die in PPT-Tabellen eingefügt werden
Mar 26, 2024 pm 04:16 PM
1. Erstellen Sie eine neue PPT-Datei und nennen Sie sie als Beispiel [PPT-Tipps]. 2. Doppelklicken Sie auf [PPT-Tipps], um die PPT-Datei zu öffnen. 3. Fügen Sie als Beispiel eine Tabelle mit zwei Zeilen und zwei Spalten ein. 4. Doppelklicken Sie auf den Rand der Tabelle. Die Option [Design] wird in der oberen Symbolleiste angezeigt. 5. Klicken Sie auf die Option [Schattierung] und dann auf [Bild]. 6. Klicken Sie auf [Bild], um das Dialogfeld mit den Fülloptionen mit dem Bild als Hintergrund aufzurufen. 7. Suchen Sie im Verzeichnis nach dem Fach, das Sie einfügen möchten, und klicken Sie auf „OK“, um das Bild einzufügen. 8. Klicken Sie mit der rechten Maustaste auf das Tabellenfeld, um das Einstellungsdialogfeld aufzurufen. 9. Klicken Sie auf [Zellen formatieren] und aktivieren Sie [Bilder als Schattierung anordnen]. 10. Stellen Sie [Zentrieren], [Spiegeln] und andere benötigte Funktionen ein und klicken Sie auf OK. Hinweis: Standardmäßig werden Bilder in die Tabelle eingefügt
So erstellen Sie eine Tabelle für die Umsatzprognose
Mar 20, 2024 pm 03:06 PM
Die Fähigkeit, Formulare geschickt erstellen zu können, ist nicht nur eine notwendige Fähigkeit für Buchhaltung, Personalwesen und Finanzen, sondern auch für viele Vertriebsmitarbeiter sehr wichtig. Denn die verkaufsbezogenen Daten sind sehr umfangreich und komplex und können nicht einfach in einem Dokument zur Erklärung des Problems erfasst werden. Damit sich mehr Vertriebsmitarbeiter mit der Tabellenerstellung in Excel auskennen, stellt der Herausgeber die Tabellenerstellungsthemen zur Umsatzprognose vor. Freunde in Not sollten sich das nicht entgehen lassen. 1. Öffnen Sie [Sales Forecast and Target Setting], xlsm, um die in jeder Tabelle gespeicherten Daten zu analysieren. 2. Erstellen Sie ein neues [Leeres Arbeitsblatt], wählen Sie [Zelle] und geben Sie [Etiketteninformationen] ein. [Ziehen] Sie nach unten und [füllen] Sie den Monat aus. Geben Sie [Sonstige] Daten ein und klicken Sie auf [
So legen Sie den WPS-Wert fest, um die Farbe entsprechend den Bedingungen automatisch zu ändern. Schritte zum Festlegen des WPS-Tabellenwerts, um die Farbe entsprechend den Bedingungen automatisch zu ändern
Mar 27, 2024 pm 07:30 PM
1. Öffnen Sie das Arbeitsblatt und suchen Sie die Schaltfläche [Start]-[Bedingte Formatierung]. 2. Klicken Sie auf „Spaltenauswahl“ und wählen Sie die Spalte aus, zu der die bedingte Formatierung hinzugefügt werden soll. 3. Klicken Sie auf die Schaltfläche [Bedingte Formatierung], um das Optionsmenü aufzurufen. 4. Wählen Sie [Bedingte Regeln hervorheben]-[Zwischen]. 5. Geben Sie die Regeln ein: 20, 24, dunkelgrüner Text mit dunkler Füllfarbe. 6. Nach der Bestätigung werden die Daten in der ausgewählten Spalte entsprechend den Einstellungen mit entsprechenden Zahlen, Text und Zellenfeldern eingefärbt. 7. Bedingte Regeln ohne Konflikte können wiederholt hinzugefügt werden, aber bei widersprüchlichen Regeln ersetzt WPS die zuvor festgelegten bedingten Regeln durch die zuletzt hinzugefügte Regel. 8. Fügen Sie die Zellspalten wiederholt nach [Zwischen] Regeln 20-24 und [Weniger als] 20 hinzu. 9. Wenn Sie die Regeln ändern müssen, können Sie die Regeln einfach löschen und dann zurücksetzen.
Wie verwende ich JavaScript, um die Drag-and-Drop-Anpassungsfunktion der Tabellenspaltenbreite zu realisieren?
Oct 21, 2023 am 08:14 AM
Wie verwende ich JavaScript, um die Drag-and-Drop-Anpassungsfunktion der Tabellenspaltenbreite zu realisieren? Mit der Entwicklung der Web-Technologie werden immer mehr Daten in Tabellenform auf Webseiten angezeigt. Manchmal kann die Spaltenbreite der Tabelle jedoch nicht unseren Anforderungen entsprechen und der Inhalt kann überlaufen oder die Breite reicht möglicherweise nicht aus. Um dieses Problem zu lösen, können wir JavaScript verwenden, um die Drag-and-Drop-Anpassungsfunktion der Spaltenbreite der Tabelle zu implementieren, sodass Benutzer die Spaltenbreite frei an ihre Bedürfnisse anpassen können. Um die Drag-and-Drop-Anpassungsfunktion der Tabellenspaltenbreite zu realisieren, sind die folgenden drei Hauptpunkte erforderlich:
Was soll ich tun, wenn das Formular außerhalb der gepunkteten Linie nicht gedruckt werden kann?
Mar 28, 2023 am 11:38 AM
Lösung für das Problem, dass die Tabelle nicht außerhalb der gestrichelten Linie gedruckt werden kann: 1. Öffnen Sie die Excel-Datei und klicken Sie auf der geöffneten Seite auf „Drucken“. 2. Suchen Sie auf der Vorschauseite nach „Kein Zoom“ und wählen Sie „Anpassen auf eine Seite“. 3. Wählen Sie den Drucker aus, auf dem die Dokumentation gedruckt werden soll.
So entfernen Sie wiederholte Tabellenränder in CSS
Sep 29, 2021 pm 06:05 PM
In CSS können Sie das Attribut „border-collapse“ verwenden, um doppelte Ränder in der Tabelle zu entfernen. Dieses Attribut kann festlegen, ob der Tabellenrand zu einem einzigen Rahmen reduziert oder getrennt wird. Sie müssen nur den Wert „collapse“ festlegen, um überlappende Ränder zusammenzuführen . Werden Sie zu einem Rand, um den Effekt eines einzeiligen Randes zu erzielen.
So exportieren und importieren Sie Tabellendaten in Vue
Oct 15, 2023 am 08:30 AM
Für die Implementierung des Exports und Imports von Tabellendaten in Vue sind bestimmte Codebeispiele erforderlich. In Webprojekten, die mit Vue entwickelt wurden, müssen wir häufig Tabellendaten nach Excel exportieren oder Excel-Dateien importieren. In diesem Artikel wird erläutert, wie Sie mit Vue die Export- und Importfunktionen von Tabellendaten implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Installationsabhängigkeiten für den Export von Tabellendaten Zunächst müssen wir einige Abhängigkeiten für den Export von Excel-Dateien installieren. Führen Sie den folgenden Befehl über die Befehlszeile in Ihrem Vue-Projekt aus: npmin
Verwendung von JavaScript zur Implementierung der Paging-Anzeige von Tabellendaten
Jun 16, 2023 am 10:00 AM
Da die Datenmenge weiter wächst, wird die tabellarische Darstellung immer schwieriger. Meistens ist die Datenmenge in einer Tabelle so groß, dass das Laden langsamer wird und Benutzer die Seite ständig durchsuchen müssen, um die gewünschten Daten zu finden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript eine paginierte Anzeige von Tabellendaten realisieren und Benutzern das Auffinden der gewünschten Daten erleichtern. 1. Tabellen dynamisch erstellen Um die Paging-Funktion besser kontrollierbar zu machen, müssen Tabellen dynamisch erstellt werden. Fügen Sie auf der HTML-Seite ein Tabellenelement hinzu, das dem folgenden ähnelt.
