how to change the table cell color using jquery

Question

I having a html table with inline edit function,when the user edit the td if the value enter by user lower than zero the td color for specific cell would change without refreshing the page.

For example: if cell =< "-1", background-color=#FF0000

there is any way to make this work in reality?

$("#table td").each( function() {
    var thisCell = $(this);
    var cellValue = parseInt(thisCell.text());        
    if (!isNaN(cellValue) && (cellValue >=0)) {
        thisCell.css("background-color","#FF0000");
    }
});

Yes. onChange, set the class name to indicate a custom styling. — , Apr 06 '14 at 08:25
Sure. Will you provide some code showing what you're working with/tried? — , Apr 06 '14 at 08:26

Ionică Bizău · Accepted Answer · 2014-04-06T09:30:36.707

3

Just iterate every cell, parse its content and set the background color:

function updateColors () {
    $("td").css("background-color", "white");
    $("td").each (function () {
       var $cCell = $(this);
       if (Number ($cCell.text()) <= -1) {
          $cCell.css("background-color", "#FF0000");
       }
    });
}

updateColors();

// http://stackoverflow.com/a/7804973/1420197    
var allCells = document.querySelectorAll("td");
for (var i = 0; i < allCells.length; ++i) {
    allCells[i].addEventListener("DOMCharacterDataModified", function () {
        console.log(this.innerText);
        updateColors();
    });
}

Demo

JSFIDDLE

edited Apr 06 '14 at 09:30

answered Apr 06 '14 at 08:27

Ionică Bizău

109,027
88
289
474

thanks for your answer but it not working ,,when i inline edit the td and enter the value -2 it not changing the color it remains the same color – Xavi Apr 06 '14 at 08:38
@Xavi Do you use `contentEditable` cells? – Ionică Bizău Apr 06 '14 at 08:43
yes i am using,so when content edited the it check the content in cell and assign the color in cell – Xavi Apr 06 '14 at 08:45
thanks do but if i remove the value in td it also showing red color and if i enter new values like 2 it also showing red color – Xavi Apr 06 '14 at 09:02
@Xavi Cannot reproduce. See the gif image. – Ionică Bizău Apr 06 '14 at 09:30

score 0 · Answer 2 · answered Apr 06 '14 at 08:29

0

Give an ID to your cell, like <td id='cellID'>34</td> then do this in jquery:

var _cellValue = $("#cellID").html();
_cellValue = parseInt(_cellValue);
if (_cellValue=<-1){
  $("#cellID").css("background-color","#FF0000");
}

answered Apr 06 '14 at 08:29

Maysam

7,246
13
68
106

score 0 · Answer 3 · answered Apr 06 '14 at 10:33

Briefly tested, hope this helps:

var colors = {
    black: {
        num: 1,
        hex: '000'
    },
    red: {
        num: 2,
        hex: 'f00'
    },
    grey: {
        num: 3,
        hex: '333'
    }
};

function getColor(num) {
    var color = '#fff'; // default
    $.each(colors, function(index, obj) {
        if (parseInt(obj.num)===parseInt(num)) {
            color = '#'+obj.hex;
        }
    });
    return color;
}

$(document).on('keyup', '#mytable td', function() {
    var current = $(this).text();
    if (current.length > 0 && !isNaN(current)) {
        $(this).css('background-color', getColor(current));
    }
    else {
        // NaN, Set default color, handle errors, etc...
        $(this).css('background-color', '#fff');
    }
});

how to change the table cell color using jquery

3 Answers3

Demo