Highlight Table Cells Based On Predefined Content - tableCellColorizer

tableCellColorizer is a jQuery plugin that applies custom CSS styles to table cells based on the predefined content (characters, words, numeric values) found within your HTML table.

Use Cases:

• Data Monitoring: Highlight specific metrics or anomalies for quick identification in dashboards or data monitoring panels.
• Project Management: Highlight task statuses, like 'Completed', 'In Progress', or 'Overdue', in a project tracking table for better visibility.
• Educational Tools: Highlight correct and incorrect answers in a quiz result table.
• E-Commerce: Highlight products based on their availability or popularity in a product inventory table

See Also:

• Highlight Different Values In Table - oddMenOut
• jQuery Plugin To Highlight Duplicate Table Cells - duplifer.js
• Visual Tabular Data Comparison Plugin - jQuery Table Compare
• Highlight Largest/Lowest Value In Each Row Or Column - tableMinMax
• Colorize Numeric Values In Table Columns - Column HeatMap

How to use it:

1. Download and load the tableCellColorizer.js script after jQuery but before the closing body tag.

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

2. Define an object of characters and their corresponding CSS styles as follows:

var charToHighlight = {
    '100': 'background: #9fe4c1; color:#000;',
    '90': 'background: #ff0000; color:#fff;',
    '60': 'background: #ff0000; color:#fff;',
    // ...
};

3. Call the plugin on your HTML table and pass the charToHighlight to the tableCellColorizer function.

<table>
  ...
</table>

$(function(){ 
  $('table').tableCellColorizer(wordsToStyles);
});

---

This awesome jQuery plugin is developed by WebDesignWorx. For more Advanced Usages, please check the demo page or visit the official website.