Change the background color of cells according to the value they contain

I have a scenario where I am populating a table with random numbers, and I want the background color of each cell to change based on the value of the number in that cell. Since these numbers refresh periodically, I need the colors to update accordingly as well. How can I achieve this functionality? Thank you!

HTML

<table class="table table-bordered">
<tbody>
    <tr>
        <td>934567812</td>
        <td>657843219</td>
        <td>124578963</td>
    </tr><tr>
        <td>987654321</td>
        <td>345621789</td>
        <td>698754312</td>
    </tr><tr>
        <td>543216789</td>
        <td>215498763</td>
        <td>652134897</td>
    </tr>
</tbody>
</table>
jqueryhtmlcssdynamic-tables

Answer №1

Here is a suggestion to achieve the desired outcome:

$(".table-bordered td").each(function(){
$(this).attr("bgcolor",$(this).html());
});

Check out this fiddle for a live example

Example HTML Code:

<table>
<tbody>
<tr>
    <td bgcolor="636407029">636407029</td>
    <td>612541294</td>
    <td>870806031</td>
</tr><tr>
    <td>110235053</td>
    <td>924102758</td>
    <td>221478283</td>
</tr><tr>
    <td>572041102</td>
    <td>236316470</td>
    <td>781401130</td>
</tr>
</tbody>
 </table>

Answer №2

If you want this to function correctly, make sure to implement the transformNumberToColour method.

$("td").each(function(){
    $element = $(this);
  value = Number($element.html());
  color = transformNumberToColour(value); // it's not clear how you intend to handle this
   $element.css('background-color', color);
});

Answer №3

To accomplish this task, you will need to implement the following JavaScript code:

$("td").each(function () {
    var new_color = generateColor($(this).text());
    $(this).css("background-color", new_color);
});

Make sure to create a function called generateColor that converts values like "636407029" to "rgba(xxx,xxx,xxx,x)".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on how to navigate to the end of a div that has been created through ng-repeat in Angular JS with the

Here is the template code I am working with: <div class="chatbox" id="mailBody" > <div class="panel-body" ng-repeat="mail in mails"> <div class="m-b-none" ng-if="mail.inboxMessageType == 1"> <a href class="pull-left ...

javascriptjqueryhtmlcssangularjs

The customized uploading button functions seamlessly on desktop devices, yet encounters issues when used on

On my website, I have implemented a custom upload button alongside a hidden file input with the class .invisible-file-input. Here is how it is set up: Javascript $('.call-upload').click(function () { $(this).siblings('.invisible- ...

javascriptjquery

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

Determine the maximum size of a specified number of square divs that can fit within responsive parent divs

I am working on creating a grid of square divs inside a container with variable height and width. The number of square div's is predetermined. All square divs will have images with the same dimensions (similar to the example). They should align left ...

javascriptjqueryhtmlcss

Craft a Flawlessly Repeating Sound Experience - Online

I'm facing a challenge in creating a flawless loop of an audio file. However, all the methods I've tried so far have resulted in a noticeable gap between the end and the start. Here are the approaches I experimented with: The first approach inv ...

javascripthtmlaudiohtml5-audioweb-audio-api

Find your way to a unique div created through a while loop

Describing my issue clearly, I am using PHP to retrieve data from MySQL. The table contains multiple records. To display table records, I have implemented a while loop with mysqli_fetch_array() as the condition. These records need to be echoed out (in HT ...

phphtmlmysql

What is the correct way to apply background-position percentage in this situation?

This problem has got me at my wit's end. Imagine a series of divs lined up horizontally. Each one is sized as a percentage of the total width, but that total width is unknown. For instance: --------------------------------- | | | ...

htmlcss

Obtaining an Element using Selenium with a specific label

My goal is to align the texts (answers) beside the radio buttons in order to compare them with the correct answer. Below is the HTML snippet: <tbody> <tr> <td class="middle" width="15"> <input name="multiple_choice_resul ...

htmlselenium-webdriverlabel

Conceal the div based on the criteria

I need an inline solution for this issue: <div id="xy<%=statusCount%>" style="margin-top: 50px;display:${<%= statusCount %>!=0 ? 'none' : ''};" class="XYZ"> This code is causing an error ...

htmlcssjspjasperserver

Using style binding and ngStyle doesn't appear to be effective for setting a background image within a DIV element in Angular5

After facing difficulties in customizing the spacing of Angular material cards, I decided to create my own cards. However, during this process, I encountered an issue where I needed to set an image as a background inside a div. Despite trying various CSS ...

javascriptcssangularangularjs-directive

The image sits on the edge of the container, not fully contained

.sub2 { background-color: #FFFFBF; margin-top: 30px; height: 410px; width: 100%; } h1.sub2 { font: bold 100px american captain; text-decoration: underline; float: right; } p.sub2- { font: italic 25px american captain; margin-top: -300px; ...

htmlcss

The animation using Jquery and CSS is experiencing some glitches on Safari when viewed on an

Why is smooth animation not working on iPad Safari with jQuery animate? $('#myId').css({ 'left': '-100%' }).animate({ 'left': '0' }, 300, 'linear'); I also tried using the addClass option and in ...

javascriptjqueryhtmlcss

Navigating the intricacies of handling login with ajax

Essentially, the process of logging in typically unfolds as follows: The user inputs their information into the login form and submits it, The server (whether it be Ruby, PHP, Node.js, or any other) processes this data and either, a) redirects to the lo ...

javascriptjqueryajaxauthentication

Include the circle.css file in the Angular 4 project by loading it in the head section of the

I am currently working with Angular 4 and would like to incorporate the circle.css styles from cssscript. After downloading the file from the provided link, I placed the circle.css within my something component file. However, when attempting to use &l ...

htmlcssangular

Issue with click function not activating in Chrome when using Angular 6

I am facing an issue where the (click) function is not triggering in my select tag when I use Google Chrome, but it works fine in Mozilla. Below is my code: <div class="col-xl-4 col-lg-9"> <select formControlName="deptId" class="form-control ...

javascripthtmlangulartypescriptgoogle-chrome

A code to ensure input values are always set to the maximum possible value

I recently developed a script that monitors the live value property of 3 <input> elements, correcting them if the live value is outside the specified range. However, I encountered an issue where the script automatically sets the value to the max as s ...

javascripthtml

Event trigger malfunction or potential issue with index activation

.full-arrow is a unique arrow that allows selection of the next page. The .full-navigation serves as a navigation bar, consisting of boxes in a line that change color upon selection. Although the full function may not be displayed here, you can grasp the b ...

javascriptjqueryevents

The script is failing to execute in a modal dialog box

Can anyone help troubleshoot why this script isn't functioning properly in a modal window (PrettyPhoto)? I've attempted jQuery(document.body).ready(function(){ instead of $(function() { but I'm encountering the same issue: the script wor ...

jquery

The length of the LinearProgress bar does not match the length of the navbar

Utilizing the LinearProgress component from Material UI, I created a customized ColoredLinearProgress to alter its color: import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import { LinearP ...

javascripthtmlreactjsmaterial-ui

Issue with retrieving the ID of a dynamically created element with jQuery

Whenever I try to execute my function to display the id for a click event of a tag that has items appended dynamically, the alert does not show the id. Instead, it displays 'undefined'. Can anyone help me figure out where I am going wrong? Here ...

javascriptjqueryxmlajax