tableMinMax
Übersicht
JavaScript that colors the min / max values of a HTML table.
JavaScript das die Minimum / Maximum Werte, einer HTML-Tabelle einfärbt.
Features
- Werte in einzelner Spalte markieren
- Werte in einzelne Reihe markieren
- Werte der gesamten Tabelle markieren
- Mehrere Spalten oder Zeilen gleichzeitig markieren
- Zelle komplett oder SPAN (mit Werten) markieren
- Übergabe von CSS-Klassen
- Übergabe der Parameter (teilweise) per DATA-Attribut.
- Rückgabe der Min/Max Werte als Array.
- Ist color2k eingebunden, wird die Text-Farbe automatisch entsprechend der Hintergrund-Farbe angepaßt.
https://github.com/ricokahler/color2k
https://www.jsdelivr.com/package/npm/color2k
Voraussetzungen
Das Script muss am Ende der Seite aufgerufen werden, oder z. B. bei Verwendung von jQuery innerhalb von
$(document).ready(function() {
});
Wird die Tabelle per Script aufgebaut, muß diese vollständig sein, bevor die Funktion gestartet wird.
Z. B. Aufruf in Datatables im Callback "initComplete".
Beispiele
CSS:
.mSpan { display: inline-block; padding: .1em; min-width: 4em; border-radius: .3em; }
.min { background-color: #DF0101; color: white; }
.max { background-color: #01DFA4; color: black; }
Aufruf per DATA-
<table id="example1"
data-search-mode="all"
data-css-min="min mSpan"
data-css-max="max mSpan">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>3435</td>
<td>234</td>
<td>567</td>
<td>87</td>
<td>234</td>
<td>432</td>
</tr>
...
tableMinMax({
"table": "#example1"
});
Aufruf über Optionen:
<table id="example2">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>35</td>
<td>234</td>
<td>567</td>
<td>87</td>
<td>234</td>
<td>432</td>
</tr>
...
tableMinMax({
"table": "#example2",
"css": {
"min": "minT",
"max": "maxT"
},
"colorize": "cell"
});
Optionen über Data-Attribut überschreiben die Parameter beim Funktionsaufruf.
ToDo
- Abhängkeit von jQuery entfernen
- Mehrere Spalten / Reihen gleichzeitig übergeben
- Werte unterhalb und /oder über Grenzwerten markieren
- Alle Parameter überprüfen
- gleiche Werte ebenfalls markieren
Author
Thorsten Willert
Lizenz
Das ganze steht unter der MIT Lizenz.
5 Sep 8, 2022
11 Dec 30, 2022
7 Jul 31, 2022
5 May 7, 2022
3 Jan 7, 2023
18 Oct 23, 2022
63 Oct 20, 2022
3 Jul 12, 2021
6 Feb 17, 2022