Spalten einer Tabelle dynamisch ändern

[Bildschirmfoto]
 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:  AusblendenKopierenLinkZeilen

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 < $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($nrrange($spalten 1$anzahlDatensaetze$spalten))) 
  echo 
'</tr><tr>';
}

echo 
'</tr></table>';
?>

</body>
</html>

Tipps

Zeitbalken
Dieses Script zeigt die vergangene Zeit mit einem farbigen Fortschrittsbalken an. Mit JavaScript oder PHP kann man die vergangene Zeit berechnen lassen und mit CSS wird dann der Fortschrittsbalken farbig angezeigt.
RSS-Feed selbst erstellen
Ein RSS-Feed lässt sich, mit wenigen Codezeilen, einfach selbst erstellen. Diese stellen in erster Linie ein vorzügliches Instrument dar, den Bekanntheitsgrad einer Website zu steigern.
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.
Mit JSON Daten zwischen JavaScript und PHP austauschen
JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.