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: Ausblenden ❘ Kopieren ❘ Link ❘ 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
- Mit JSON Daten zwischen JavaScript und PHP austauschen
- JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.
- Suchanfrage an eine Datenbank über AJAX senden und empfangen
- Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
- Umstellung von der PHP-Funktion mysql() zu mysqli()
- Zur Zeit stellen viele Provider auf PHP 7 um, mit dieser neuen PHP-Version werden viele "alte" Scripte nicht mehr laufen die auf eine Datenbank zugegriffen haben.
- Kontaktformular - E-Mail mit PHPMailer und SMTP versenden
- Manchmal möchte man die E-Mail vom Kontaktformular über dem PHPMailer und SMTP versenden. Weil das aber nicht so einfach ist und bestimmte Einstellungen beachtet werden müssen, stelle ich hier beispielhaft ein PHP-Skript vor.
Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.
Diese Schlagwörter könnten Sie interessieren:
Passwortschutz Mehrfachauswahl Zeitbalken SQLite Dateibrowser Wecker Mausrad ASCII Quelltext localStorage Tooltip Animation Neon Buchstaben Absolute URL Inhaltsverzeichnis Authentifizierung Audio-Player Kalenderwoche Floodsperre Event-Kalender EVA-Prinzip Animierte Sternebewertung Backdrop-Filter Key Codes Bausteine
Passwortschutz Mehrfachauswahl Zeitbalken SQLite Dateibrowser Wecker Mausrad ASCII Quelltext localStorage Tooltip Animation Neon Buchstaben Absolute URL Inhaltsverzeichnis Authentifizierung Audio-Player Kalenderwoche Floodsperre Event-Kalender EVA-Prinzip Animierte Sternebewertung Backdrop-Filter Key Codes Bausteine