简体   繁体   中英

change between 3 different background color based on cell value but only if another call value is different than

I was helped along a while back with some code for changing background color in a table cell; the final solution works very well: change between 3 different background color based on cell value

Now I'd like to add another condition for this, please take a look here to see what I mean: unable to post link: jsfiddle dot net/Bouncer/LeyqceLe/4/

Is this at all possible without loosing the current function?

Here it is my friend: jsFiddle

It gets the value of avai :

var diff = $('td.avai').html();

then checks if the value of the avai cell is other than 20, and skips the cell colouring:

if(diff != 20) {    ...    }

if i understand right this is what you want?

// JavaScript Document
var cell = $('td.bg_status');
// Get the td value
var avai_value = $('.avai').text();

cell.each(function() {

    var cell_value = $(this).html();
    // continue if td value is not 20
    if(avai_value!=20){
        if ((cell_value >= 0) && (cell_value <=19)) {
            $(this).css({'background' : '#FF9900'});   
        } else if ((cell_value >= 20) && (cell_value <=39)) {
            $(this).css({'background' : '#99cc00'});
        } else if (cell_value >= 40) {
            $(this).css({'background' : '#99ccff'});
        }
    }
});

I forgot to mention earlier that my site is running Joomla! 3. I was just informed that Joomla doesn't allow to use $ signs for a while for jQuery codes. Also the line with avai_value caused an error and had to be rewritten like so:

// JavaScript Document
if(jQuery('td.avai').length){
    var cell = jQuery('td.bg_status');
    var diff = jQuery('td.avai').html();
    cell.each(function() {
        var cell_value = jQuery(this).html();
        if(diff != 20) {    
            if ((cell_value >= 0) && (cell_value <=19)) {
                jQuery(this).css({'background' : '#FF9900'});   
            } else if ((cell_value >= 20) && (cell_value <=39)) {
                jQuery(this).css({'background' : '#99cc00'});
            } else if (cell_value >= 40) {
                jQuery(this).css({'background' : '#99ccff'});
            }
        }
    });
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM