Highlight Table Cells Based On Predefined Content - tableCellColorizer

File Size: 5.89 KB
Views Total: 313
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.


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