Press "Enter" to skip to content

Highlight Colors Min/Max Values For The HTML Table | tableMinMax

tableMinMax is a JS/jQuery plugin to automatically mark minimum and maximum values in the HTML table. This plugin is automatically handled table data highlighting the largest and lowest values in each row or column with custom CSS styles.

css color codes, css color picker, background color opacity css, css color palette, it has an additional parameter alpha to specify the opacity of a color

How to make use of it:

1. Download the package deal and load the JavaScript tableMinMax.js after the jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/tableMinMax.js"></script>

2. Attach the plugin to the HTML table and we’re able to go.

<table id="example">
  ...
</table>
tableMinMax({
  "table": "#example"
});

3. Determine the wherein cells and/or columns you need to highlight the Largest/Lowest Values.

tableMinMax({
  "table": "#example",
  "search": {
    "mode": "row", // or 'col', 'all'
    "nr": "2" // row / col number
  },
});

4. Apply customized CSS types to the Largest/Lowest Values.

tableMinMax({
  "table": "#example",
  "css": {
    "min": 'min',
    "max": 'max'
  },
  colorize: 'span' // apply CSS class(es) to 'span' or 'cell' (default)
});
.min {
  background-color: #DF0101;
  color: white;
}

.max {
  background-color: #01DFA4;
  color: black;
}

5. Determine whether or not to swap min/max classes.

tableMinMax({
  "table": "#example",
  "css": {
    "min": 'min',
    "max": 'max'
  },
  invert: true
});

6. You can move the choices through HTML data attributes as follows:

<table id="example"
       data-search-mode="col"
       data-css-min="min"
       data-css-max="max">
       ...
</table>

Highlight Largest/Lowest Value In Each Row Or Column, table min max Plugin/Github

tableMinMax-Demo


See Demo And Download

Official Website(THWillert): Click Here

This superior jQuery/javascript plugin is developed by THWillert. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.