Modifying the hue of a cell in a table

In my ASP.net project, I have a HTML table displaying data.

    <td>
       <div align="left" >
             <%= %TRIM(DLDPFS + ' ' + Status) %>
       </div>
    </td>

I am looking for a way to change the background color of the cell based on the value in the "Status" column. For example, if status is 'low', then the cell should be red. If it's 'high', make it green, and so on.

I'm aware that CSS doesn't offer much flexibility with conditions, so I'm seeking suggestions on how to achieve this dynamic styling effect. Any ideas?

htmlcssasp.nethtml-table

Answer №1

To achieve the desired outcome, you can utilize a combination of JS and CSS.

JavaScript:

var elements = document.getElementsByTagName("td"),
    length = elements.length;

for(var i = 0; i < length; i++){
    var tempValue = elements[i].innerText;

    if(tempValue > 0){
        elements[i].innerHTML = '<span class="high">'+ tempValue +'</span>'
    } else {
        elements[i].innerHTML = '<span class="low">'+ tempValue +'</span>'
    }
}

CSS:

.high { color:green; }
.low { color:red; }

I trust this approach proves to be beneficial!

Answer №2

To style your status value, you can simply insert it into a class attribute and then apply the relevant CSS rules. For example:

<td class = "<%= %TRIM(DLDPFS + ' ' + Status) %>">
       <div align="left" >
             <%= %TRIM(DLDPFS + ' ' + Status) %>
       </div>
    </td>

Here is an example of the CSS:

.low {
background-color: red;
}

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

Is there a way to change the text (price) when I select an option?

<div class="single-pro-details"> <!--Customize in the CSS--> <h6>Home / Beats</h6> <h4>Unique Lil Tecca Type Beat - New Love</h4> <h2 id="price">$ ...

javascripthtmlcss

Ways to incorporate text using css within a textarea?

I want to include an image on my webpage using the following CSS: { background-image: url(../images/icon_new_reset.png); background-repeat: no-repeat; } Is there a way to provide alternative text or overlay text on this background image? ...

css

Displaying a specific fieldset based on the radio button selection

I have created a form to handle user input using PHP, with the initial question prompting the user to choose from three radio buttons for the "type" parameter - the options being "book", "journal", and "website". Here is what the code looks like: <stro ...

javascriptjqueryhtmlforms

"Looking for a solution to create a fixed header alongside scrolling content? Plus, need

Is there a way to fix the header in place while allowing the content to scroll underneath it? Also, how can I position the CSS Play button above the line and make it visually appealing? index.html: <!DOCTYPE html> <html> <head> < ...

htmlcss

What is the best way to alternate between two CSS stylesheets when using jQuery-UI?

Just getting started with jQuery and javascript and decided to test out 2 different jQuery-ui stylesheets in a simple .html file. The goal is to have the example dialog open with the "flick" stylesheet and the datepicker within the dialog open with the "u ...

javascriptjquerycssjquery-uistylesheet

How to automatically refresh a page in Vue.js when a button is clicked

I am trying to achieve a page refresh when I click the button. Below is the HTML code for the button: <button v-on:click="getUser()" :class='gender'>Get Random User</button> Here is the JavaScript code: const app = Vue.crea ...

htmlvue.jsbuttononclickpage-refresh

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

Optimizing the image layout and crafting the perfect CSS design

As a newcomer to the world of HTML and CSS, I am eager to learn from experienced gurus how to layout the image above using HTML and minimal CSS. Thank you for your help. This is my approach: Firstly, I would slice eight small images and one white backgrou ...

htmlcss

Navigate to a predetermined page when the server encounters an HTTP error 403

We are facing a situation where multiple applications are pointing to the same physical directory. My goal is to set up custom error redirects for http error code 403 on just one of the sites. However, whenever I make changes in the web.config file, they ...

asp.netiis-7iis-7.5

Is there a way to automatically scroll to a sidebar item when clicking on a marker?

Is it possible to make the sidebar scroll to the item clicked on the marker? I saw this functionality on a website like this one. Any ideas on how to achieve this would be appreciated. Thanks! This div contains map id & side_bar id. <div style="wi ...

javascriptjqueryhtmlcssgoogle-maps-api-3

Struggling with evenly positioning 6 elements in two rows using CSS

For positioning 6 different elements on a webpage, I've experimented with various methods: I initially tried stacking two unordered lists vertically but faced issues with scaling when stretching the page. Another attempt was using a table, but I stru ...

htmlcss

CSharp MVC using HTML input field styled with Bootstrap features

I have set up a textbox on my webpage which prompts the user to input a string. Upon pressing a button, this string is compared to find matching fields in the database. Additionally, I have another button that triggers the display of a bootstrap modal wher ...

c#javascriptjqueryhtmltwitter-bootstrap

Live updates to database tables based on checkbox selections

Utilized a repeater to showcase a list on the screen. I incorporated an <asp:checkbox for each record, with the intention of having it instantly update in the corresponding table in the database based on whether it was clicked or not.....My progress so ...

c#javascriptjqueryasp.net

Is it possible for .getElementByClassName to identify Ajax.GET elements?

I've run into a problem that I need help with: The issue arises when I have an API that makes an Ajax GET request. In the success function, it creates a button, a div, and several span elements with information inside, each with its own class. The GE ...

javascripthtmlajax

Using PHP to invoke an ASP.Net MVC action

I have minimal knowledge of PHP and need to make a call from PHP to an ASP.Net MVC page for integration on the PHP page. Initially, I thought using an AJAX call would be the simplest way to implement this. However, it doesn't seem to be working as ex ...

phpasp.netajaxasp.net-mvc

Ways to center items within a column using Bootstrap

I'm working on a React project with Bootstrap and I'm trying to align the contents of my second column to the bottom. However, everything I've tried so far hasn't been successful. I've seen others achieve this layout but for some r ...

htmlcssreactjstwitter-bootstrapbootstrap-5

Can an IronPython asp.net webform be linked to a dll file?

With ASP.NET using the standard ASP model, it is possible to have the codefile of the aspx file in a dll by inheriting the class inside the dll. However, in IronPython there is a different model where the only option in the aspx page is "codefile" and th ...

asp.netdllironpython

Lag in responsiveness of iOS devices when using html5 applications

My HTML5 video app includes a combination of video, a JavaScript swipable playlist, and other animated overlays. When using the app on iOS, the performance of playlist swiping and overlay animations is great upon initial load. However, after playing a vid ...

javascriptioshtmlhtml5-video

Add several converted links as variables in each section

The title may not be the clearest, but I am facing a challenge with an ecommerce site that has unmodifiable HTML. My goal is to include additional links for each product displayed on a page showcasing multiple products. Each link should be unique to its re ...

javascriptjqueryhtml