Gibt es die Möglichkeit dies in HTML/PHP anzeigen zu lassen
Hä?
Struktur Elemente, wie eine Tabelle werden mit HTML erstellt und mit CSS designt.
Was ist konkret deine Frage? Wie du sie füllen kannst mit PHP oder mit Javascript?
PHP ist ja auf der Server-Seite. Zum Beispiel, wenn du die Einträge in einer Datenbank hast, kannst du diese über PHP auslesen und direkt das entsprechende HTML-Konstrukt generieren und an den Client zurückgeben.
Oder du machst es asynchron und lädst zuerst die Seite leer und dann lädst du per Ajax (und somit Javascript) die Daten und füllst diese in die Tabelle.
Mir geht es darum, wie ich aus der JS Datei, das ganze in HTML und/oder PHP Datei umwandele
Verstehe deine Frage immer noch nicht.
<table id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Tel</th>
</tr>
</thead>
<tbody>
<tr><td>Test</td><td>test@test.de</td><td>1234</td></tr>
</tbody>
</table>So sieht ja z.B. eine Tabelle in HTML aus.
Hast du jetzt z.B. Daten kannst du diese via JS einfach hinzufügen:
const data = [
["A", "bla@bla.de", "123"],
["B", "bla@bla.de", "456"],
["C", "bla@bla.de", "789"]
];
const tableBody = document.querySelector('#dataTable tbody'); //Wir holen uns im DOM die Tabelle
// Wir laufen durch alle Daten im Array
data.forEach(row => { //row wäre im 1. Durchlauf: ["A","bla","123"]
const tr = document.createElement('tr'); //tr Element wird erstellt
row.forEach(cell => { //cell wäre "A", dann im nächsten Durchlauf "bla", dann "123"
const td = document.createElement('td'); //td Element wird erstellt
td.textContent = cell;
tr.appendChild(td); //Wir fügen es dem tr-Element hinzu
});
tableBody.appendChild(tr); //Daten werden einfach an die Tabelle gehangen
});Also laut WoltLab Forum, will er wohl externe Daten in einer Tabelle anzeigen lassen: https://www.woltlab.com/commun…545-tabelle-in-einer-box/
Alles anzeigenVerstehe deine Frage immer noch nicht.
HTMLAlles anzeigen<table id="dataTable"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Tel</th> </tr> </thead> <tbody> <tr><td>Test</td><td>test@test.de</td><td>1234</td></tr> </tbody> </table>So sieht ja z.B. eine Tabelle in HTML aus.
Hast du jetzt z.B. Daten kannst du diese via JS einfach hinzufügen:
JavaScriptAlles anzeigenconst data = [ ["A", "bla@bla.de", "123"], ["B", "bla@bla.de", "456"], ["C", "bla@bla.de", "789"] ]; const tableBody = document.querySelector('#dataTable tbody'); //Wir holen uns im DOM die Tabelle // Wir laufen durch alle Daten im Array data.forEach(row => { //row wäre im 1. Durchlauf: ["A","bla","123"] const tr = document.createElement('tr'); //tr Element wird erstellt row.forEach(cell => { //cell wäre "A", dann im nächsten Durchlauf "bla", dann "123" const td = document.createElement('td'); //td Element wird erstellt td.textContent = cell; tr.appendChild(td); //Wir fügen es dem tr-Element hinzu }); tableBody.appendChild(tr); //Daten werden einfach an die Tabelle gehangen });
Ich habe eine API im Interrnet gefunden. -> https://collectapi.com/tr/api/football/
Ist das nicht ein JSON Datei?
Ist das nicht ein JSON Datei?
Ja, die Rückgabe ist im JSON Format.
Was du wiederum in ein Objekt konvertieren kannst.
Man macht das genau so, wie ich es gezeigt hatte.
<table id="dataTable">
<thead>
<tr>
<th>score</th>
<th>date</th>
<th>away</th>
<th>home</th>
</tr>
</thead>
<tbody>
</tbody>
</table>//Hier holen wir uns alle Daten :)
fetch("https://api.collectapi.com/football/results?data.league=super-lig", {
method: "GET",
headers: {
"content-type": "application/json",
"authorization": "apikey your_token"
}
})
.then(response => response.text())
.then(responseText => fillTable(responseText))
.catch(error => console.error('Error:', error));
////
function fillTable(jsonData)
{
const data = JSON.parse(jsonData); //Jetzt haben wir ein JS-Objekt
const tableBody = document.querySelector('#dataTable tbody'); //Wir holen uns im DOM die Tabelle
//Hier gehen wir alle Daten durch und fügen sie einzeln der Tabelle hinzu
data.result.forEach(match => {
const row = document.createElement("tr");
//Jetzt fügen wir die einzelnen Elemente aus dem JSON dem tr-Objekt für die Tabelle hinzu
const scoreCell = document.createElement("td");
scoreCell.textContent = match.score;
row.appendChild(scoreCell);
const dateCell = document.createElement("td");
dateCell.textContent = match.date;
row.appendChild(dateCell);
const awayCell = document.createElement("td");
awayCell.textContent = match.away;
row.appendChild(awayCell);
const homeCell = document.createElement("td");
homeCell.textContent = match.home;
row.appendChild(homeCell);
// Und nun fügen wir alles der Tabelle hinzu
tableBody.appendChild(row);
});
}