Updating Multiple Characters Simultaneously in Text Using JavaScript

Question

Updating Multiple Characters Simultaneously in Text Using JavaScript

I'm faced with the challenge of coloring a table based on its values. For instance, if a cell contains 150%, it should be red; if it's 50%, it should be green. Unfortunately, the text in my table has spaces and '%' symbols scattered throughout. How can I remove these unwanted characters?

This is what I've tried so far:

<script type="text/javascript">

        $(document).ready(function () {
            $('#myTable td.PercentMem').each(function () {
                if ($(this).text().replace(/\s/g, '').replace('%', '') >= '100') {
                    $(this).css('background-color', '#ff0000');
                }
                else {
                    $(this).css('background-color', '#33cc33');
                }
            });
        });

    </script>

Thank you!

EDIT

It seems I failed to mention that some percentages include decimal points, like "50.89%". Current solutions are converting this to "5089" which isn't desired. How can I retain the decimal point?

javascript

Answer 1

Answer №1

To convert a string to an integer, you must first remove all non-numeric characters. This can be achieved with the following code snippet:

parseInt($(this).text().replace(/\D/g,''))

. Additionally, make sure that when comparing values, you are comparing numbers and not strings. Here is a revised version of your code:

        $(document).ready(function () {
            $('#myTable td.PercentMem').each(function () {
                if (parseInt($(this).text().replace(/\D/g,'')) >= 100) {
                    $(this).css('background-color', '#ff0000');
                }
                else {
                    $(this).css('background-color', '#33cc33');
                }
            });
        });

Please note that I have not tested this code personally, but it should work as intended.

Answer 2

To convert a string to an integer, you must first remove all non-numeric characters. This can be achieved with the following code snippet:

parseInt($(this).text().replace(/\D/g,''))

. Additionally, make sure that when comparing values, you are comparing numbers and not strings. Here is a revised version of your code:

        $(document).ready(function () {
            $('#myTable td.PercentMem').each(function () {
                if (parseInt($(this).text().replace(/\D/g,'')) >= 100) {
                    $(this).css('background-color', '#ff0000');
                }
                else {
                    $(this).css('background-color', '#33cc33');
                }
            });
        });

Please note that I have not tested this code personally, but it should work as intended.

Answer 3

Answer №2

If you want to achieve this without relying on jQuery for element selection, pure JavaScript can be used instead:

const myCells = document.querySelectorAll('.PercentMem');

myCells.forEach(cell => {
  const cellValue = cell.textContent.replace(/\D+/g, '');
        
  cell.classList.toggle(parseInt(cellValue) >= 100 ? 'red' : 'green');
});

For the complete code, you can check out this sandbox example.

Answer 4

If you want to achieve this without relying on jQuery for element selection, pure JavaScript can be used instead:

const myCells = document.querySelectorAll('.PercentMem');

myCells.forEach(cell => {
  const cellValue = cell.textContent.replace(/\D+/g, '');
        
  cell.classList.toggle(parseInt(cellValue) >= 100 ? 'red' : 'green');
});

For the complete code, you can check out this sandbox example.

Updating Multiple Characters Simultaneously in Text Using JavaScript

Answer №1

Answer №2

Similar questions

Automated vertical alignment of rows within the Bootstrap table

The state in React is not being updated when componentWillReceiveProps is called

Load subtitles into your video in real-time

Tips for converting a raw SQL query to Knex syntax

What is the best way to create a smooth transition for a bootstrap navbar in chrome, toggling from right to left on

Retrieving data with model.fetch in Backbone.js when the server response is null

The initial call to AJAX GET may result in undefined, but it successfully retrieves data on the subsequent attempt

Dynamically update selectable dates in Bootstrap datepicker based on availability

develop a real-time website availability tracker using Node.js

Is there a way to consistently trigger the browser.webRequest.onBeforeRequest event in Mozilla Firefox when it is launched via a link?

JavaScript - Error: The '}' token was unexpected

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

Using Chrome's tabs.executeScript() method with an included script file

jQuery fade in problem or alternate solutions

Designing draggable divs that overlap each other

Ensure that the function .each() waits for the element to be converted to a DataURL

Can a variable be assigned based on the current route being accessed?

Customized placement of form fields on an HTML grid determined by the user

Tips on how to interact with a hyperlink in Python using a Selenium driver even when the content within the anchor tag is unknown

Utilize UI-Router $stateProvider in Angular run block for Promise Resolution