tableMinMax

Markiert Minimum- und Maximum-Werte in HTML-Tabellen

Eine JavaScript Funktion zum automatischen Markieren von Minimum- und Maximum-Werten in einer HTML-Tabelle.

Kennen Sie das? Sie haben dynamische generierte, oder auch statische, HTML-Tabellen und möchten dort gerne die Minimum- und Maximum-Werte farblich markieren?
Hier hilft diese Funktion weiter. Diese erledigt dies mit wenig Aufwand beim Einbinden und Einstellen der Parameter.

Funktionen

Auswahl der Tabelle über tag, id, Klasse usw. (siehe querySelector)
Min / Max einer Reihe
Min / Max einer Spalte
Min / Max der ganzen Tabelle
CSS-Klassen als Optionen der Markierungsart
Markierung über span oder td
Optionen können auch als HTML-data-Attribute angegeben werden

Aktuell muss für jede Reihe / Spalte die Funktion neu aufgerufen werden.
In späteren Versionen können mehrere Reihen oder Spalten bei einem Funktionsaufruf angeben werden.

Beispiel

Im folgenden Beispiel, werden die Werte in der dritten und fünften Spalte markiert.
Zusätzlich sind die Minimum- und Maximum-Werte der gesamten Tabelle markiert.

Beispiel-Tabelle
Für neue Werte: Doppelklicken auf Tabelle
1	2	3	4	5	6	7	8	9	10

Einbinden der Datei

<script src="/tableMinMax.js"></script>

Automatischer Kontrast für den Text mit color2k

Die Option text.autocontrast verwendet die JavaScript Bibliothek color2k.
Diese Option stellt die Textfarbe, anhand der Hintergrundfarbe, automatisch auf schwarz oder weiß ein.

Wenn Sie diese Option verwenden, muss color2k ebenfalls eingebunden werden:


<script
		src="https://cdn.jsdelivr.net/npm/color2k@1.1.0/index.js"
		integrity="sha256-yCiK7OHQWsGGc5O9R0OJxGfpLHSqYGq3J2ptgI+Ngqk="
		crossorigin="anonymous">
</script>

Konfiguration

CSS

Für obiges Beispiel habe ich folgende Klassen erstellt:


.mSpan{
    display:inline-block;
    min-width:4em;
    border-radius:.3em;
    padding:.1em
}
 .mCell{
    border-radius:.3em;
    font-weight: bold
}
 .min{
    background:#DF0101
}
 .max{
    background:#01DFA4
}
 .maxT{
    background:#09f
}
 .minT{
    background:#fc0
}

Parameter

Default:


{
table: 'table',
search: {
    mode: 'all',
    nr: 1
},
css: {
    mode: 'style',
    max: '',
    min: ''
},
text: {
    autocontrast: true,
    standard: 'readable'
},
colorize: 'span',
mode: 'single',
invert: false
}

Default-Werte in [Klammern].

table [table]: CSS-Selektor für die Tabelle
search.mode [all]: Suchmodus: 'row' | 'col' | 'all'
search.nr [1]: Reihen- oder Spaltennummer: 1-x
css.mode: In Arbeit ...
css.min: CSS-Klasse(n) für Minimum-Wert
css.max: CSS-Klasse(n) für Maximum-Wert
text.autocontrast [true]: Automatische Text-Farbe (schwarz/weiß), anhand der Hintergrundfarbe
Funktioniert nur, wenn color2k eingebunden ist.
text.standard [readable]: Kontrastwert Text-Farbe und Hintergrundfarbe: 'decorative' | 'readable' | 'aa' | 'aaa' = 'aa'
color2k
colorize [span]: Einfärben von td oder span: 'cell' | 'span'
mode [single]: In Arbeit ...
invert [false]: CSS-Klassen für Min/Max vertauschen

HTML-Data-Attibute

Werte für eine Tabelle festlegen über Data-Attribute:


<table
	id="example2"
	data-search-mode="col"
	data-search-nr="1"
	data-css-min="minT mCell"
	data-css-max="maxT mCell"
	data-autocontrast="true"
	data-colorize="cell">
	<head>
	...

Die Parameter der Data-Attribute haben Vorrang gegenüber dem Funktionsaufruf.

Funktionsaufruf

Werte beim Funktionsaufruf übergeben:


tableMinMax({
    "table": "#example2",
    "css": {
        "min": "minT mCell",
        "max": "maxT mCell"
    },
    "colorize": "cell"
});

Sollten Sie eine Tabelle mehrfach markieren, achten Sie darauf die Markierungen für die Zellen zuerst auszühren. Damit mit bleibt der automatische Text-Contrast erhalten, wenn anschließen eine Markierung mit span darüber geschrieben wird.

Aufruf

Die Funktion muss nach dem Aufbau der Tabelle erfolgen.

Beispielsweise:

Aufruf der Funktion am Ende der Seite

Aufruf in jQuery innerhalb von:

$(document).ready(function() {
  tableMinMax({
    "table": "#example1"
  });
});

Aufruf bei Datatables über den Callback:

"initComplete": function( oSettings ) {
  tableMinMax({
    "table": "#example1"
  });
}

Rückgabewert

Array mit dem minimalen und maximalen Wert.

Repository auf GitHub

Download von GitHub:

tableMinMax | Downloads 12 | Download

JavaScript