Apply CSS Classes To Elements Depending On Numeric Values - addClassByAtt

Apply CSS Classes To Elements Depending On Numeric Values - addClassByAtt

addClassByAtt is a super light (less than 1kb minified) jQuery plugin that applies different CSS classes elements depending on the values in a certain attribute.

Use this plugin to colorize the Text and Background colors of table cells based on the value range.

1. Import the minified version of the jQuery addClassByAtt plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.addClassByAtt.min.js"></script>

2. Define the min/max values and CSS classes corresponding in a JavaScript object as follows:

const classes = [
      {'class': 'class-1', 'minVal': 0, 'maxVal': 9},
      {'class': 'class-2', 'minVal': 10, 'maxVal': 59},
      {'class': 'class-3', 'minVal': 60, 'maxVal': 999},
      ...
];

3. Insert numeric values in the title attribute of your html elements.

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td title="5">5</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td title="22">22</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td title="65">65</td>
    </tr>
  </tbody>
</table>

4. Initialize the plugin and done.

$('table td').addClassByAtt({
  'options': classes
});

5. Override the default attribute.

$('table td').addClassByAtt({
  'options': classes,
  'attribute': 'title'
});

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

  • Publication date: 02.04.2019
  • Source