Spalten einer Tabelle dynamisch ändern
![[Bildschirmfoto / Grafik]
Spalten einer Tabelle dynamisch ändern [Bildschirmfoto / Grafik]
Spalten einer Tabelle dynamisch ändern](../scripte/img/spalten_einer_tabelle_dynamisch_aendern.png)
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: Ausblenden ❘ Kopieren ❘ 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=utf8mb4', '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
- Sitemaps-Protokoll für Suchmaschinen automatisch erstellen
- Sorgen Sie dafür, dass die Nutzer auf einen größeren Teil Ihrer Website aufmerksam werden mit einem „Sitemaps-Protokoll”. Dies stellt eine einfache Möglichkeit für Webmaster dar, Suchmaschinen Seiten auf Ihrer Website zu melden, die zum durchsuchen verfügbar sind.
- Formulardaten über AJAX überprüfen und speichern
- Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.
- Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten)
- Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.
- Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren
- Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
Diese Schlagwörter könnten Sie interessieren:
Passwortschutz Stoppwortliste Wasserzeichen EVA-Prinzip Tooltip Metaphone Blätterfunktion Kommentar-Box Zeitbalken Backdrop-Filter Sitemaps-Protokoll Formular Generator Animierte Sternebewertung AJAX SQLite Silbentrennung Linkliste Neon Buchstaben MySQL RSS Feed Wecker Zeit-Differenz Parallax Scrolling-Effekt localStorage Mauszeiger
Passwortschutz Stoppwortliste Wasserzeichen EVA-Prinzip Tooltip Metaphone Blätterfunktion Kommentar-Box Zeitbalken Backdrop-Filter Sitemaps-Protokoll Formular Generator Animierte Sternebewertung AJAX SQLite Silbentrennung Linkliste Neon Buchstaben MySQL RSS Feed Wecker Zeit-Differenz Parallax Scrolling-Effekt localStorage Mauszeiger