Spalten einer Tabelle dynamisch ändern
Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können. Wie das geht wird hier an einem Beispiel demonstriert, die Daten der Tabelle kommen hierbei aus einer MySQL-Datenbank.
Demo
Die Spalten der Tabelle haben immer die gleiche Breite, außer ein Wort ist breiter als eine Spalte dann wird die Spalte entsprechend verbreitert.
Wie immer an dieser Stelle folgt der Quelltext:
Quelltext Kopieren ❘ Ausblenden ❘ Zeilen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dynamische Spalten in einer Tabelle</title>
<style>
body, table {
font-family: Verdana, Arial, Sans-Serif;
font-size: 0.85rem;
}
td {
vertical-align: top;
}
td:nth-child(even) {
background-color: rgba(255, 215, 0, 0.7);
}
td:nth-child(odd) {
background-color: rgba(224,224,0, 0.7);
}
</style>
</head>
<body>
<?php
// Verbindung zur Datenbank
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
// Datensätze auslesen
$select = $db->query("SELECT `name`, `text` FROM `tabelle`");
$datensaetze = $select->fetchAll(PDO::FETCH_OBJ);
$anzahlDatensaetze = count($datensaetze);
// Anzahl der Spalten
$maxSpalten = 8;
$spalten = isset($_POST["spalten"]) ? $_POST["spalten"] : 1; // 1 = Vorauswahl
$spalten = $spalten > $maxSpalten || $spalten < 1 ? 1 : $spalten;
// Breite der Spalten
$spaltenBreite = floor(100 / $spalten);
// Formular
echo '<form method="post">
<p><label>Spalten: ' . $spalten . '
<select name="spalten" size="1" onChange="this.form.submit()">
<option></option>';
for ($i = 1; $i <= $maxSpalten; $i++) {
echo '<option>' . $i . '</option>';
}
echo ' </select>
</label></p>
</form>
<table border><tr>
';
// Ausgabe der Datensätze
foreach ($datensaetze as $nr => $datensatz) {
echo '<td style="width:' . $spaltenBreite . '%">' .
'<b>' . $datensatz->name . ':</b><br>' . $datensatz->text . '</td>';
// Berechnen wann eine neue Tabellenzeile beginnt
if (in_array($nr, range($spalten - 1, $anzahlDatensaetze, $spalten)))
echo '</tr><tr>';
}
echo '</tr></table>';
?>
</body>
</html>
Tipps
- SQLite-Datei mit PHP und PDO erstellen
- Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.
- Dateibrowser
- Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr umständlich über die Adresszeile des Browsers aufgerufen werden.
- Spalten einer Tabelle dynamisch ändern
- Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können, wie das geht wird hier an einem Beispiel demonstriert.
Diese Schlagwörter könnten Sie interessieren:
Hover-Effekt Eselsohren Passwortschutz Sortierung Mausrad Animierte Sternebewertung Lokaler Webserver Silbentrennung Sortierkasten Fotoalbum Zeitansage Zeitbalken Rahmen Gästebuch Zeit-Differenz Zeichenkodierung JSON CSS-Counter PHP-Fehlermeldungen Seitenformatierung Animation Geolocation API Blend-Mode EVA-Prinzip Kommentar-Box
Hover-Effekt Eselsohren Passwortschutz Sortierung Mausrad Animierte Sternebewertung Lokaler Webserver Silbentrennung Sortierkasten Fotoalbum Zeitansage Zeitbalken Rahmen Gästebuch Zeit-Differenz Zeichenkodierung JSON CSS-Counter PHP-Fehlermeldungen Seitenformatierung Animation Geolocation API Blend-Mode EVA-Prinzip Kommentar-Box