Aleš Sýkora / November 28, 2023 / 0 comments

Automatically change text color by content of pricing table

Post summary: Imagine you are creating a pricing table with two or more text options like: YesNoSpecial You want user to have a fine experience when adding the pricing table. So you want each option to have special color without forcing user to add some html classes. So define your table by table-cells or flexboxes and add…

Imagine you are creating a pricing table with two or more text options like:

  • Yes
  • No
  • Special

You want user to have a fine experience when adding the pricing table. So you want each option to have special color without forcing user to add some html classes. So define your table by table-cells or flexboxes and add a class .pricing-cell to each cell where the text color should change.

You can use simple jQuery for adding the classes to your table cells:

jQuery('.pricing-cell:contains("Yes")').addClass('color-true');
jQuery('.pricing-cell:contains("No")').addClass('color-false');
jQuery('.pricing-cell:contains("Special")').addClass('color-special');

After that, you need to add your CSS classes to stylesheet:

.color-true {color:green;}
.color-false {color:red;}
.color-special {color:yellow;}

And you are done. Your pricing table now have automatically colored cells. For example it can look like this:

Automatically colored “Ano” and “Ne” texts in table

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

0 comments

Share Your Thoughts