JavaScript tableMinMax Beispiel-Tabelle

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.
GitHub release (latest by date)  GitHub file size in bytes  GitHub Release Date  GitHub tag (latest commit)  GitHub tag (lincense)  Total alerts  Language grade: JavaScript 

  Repository auf GitHub
  
Download von GitHub:
tableMinMax | Downloads 12 | Download

Mehr zum Thema