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
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