javascript - Can I make a table cell have a different background color if the value =< a particular number with jquery or

admin管理员组

文章数量:1410730

I have an HTML table with a lot of numbers.

Is it possible to have a table cell change background color if the value inside that cell (or column) equals or is less than a particular number?

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

Is there a way to make this work in reality?

Erik

I have an HTML table with a lot of numbers.

Is it possible to have a table cell change background color if the value inside that cell (or column) equals or is less than a particular number?

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

Is there a way to make this work in reality?

Erik

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 15, 2011 at 4:29 JohnFx 34.9k1818 gold badges107107 silver badges166166 bronze badges asked Sep 15, 2011 at 4:05 ErikErik 5,7912727 gold badges7474 silver badges120120 bronze badges 2

• You are going to need more tags. Do you want to do this with client side script or server side script? What technology are you using. Right now the only way to answer your question is "Yes. You can do that." – JohnFx Commented Sep 15, 2011 at 4:07
• Your cell value can changes after page loading or value always is static during all page life? In other words: you need to dinamically change background of cell or background can be applied only once? – Andrew D. Commented Sep 15, 2011 at 5:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Here's an example of how to do it with JS/Jquery

$("#Yourtable td").each( function() {
     var thisCell = $(this);
     var cellValue = parseInt(thisCell.text());

     if (!isNaN(cellValue) && (cellValue <=3000)) {
         thisCell.css("background-color","#FF0000");
      }
  }
 )

Try this one

var table = document.getElementById("tableId");
var row = table.rows[rowIndex];
var cell = row.cells[cellIndex];

var cellValue = Number(cell.innerHTML);

if (cellValue > 3000)
  cell.style.backgroundColor = "red";

Yes it is easy to do this sort of thing.

For example, with jQuery, something like this:

$('table.mytable td').each(function() {
  if (this.textContent <= 3000) {
    $(this).css('background', '#FF0000');
  }
}

You could use code like this:

$(".colorMe td").each(function() {
    var val = parseInt(this.innerHTML, 10);
    if (val < 3000) {
        this.style.backgroundColor = "#F00000";
    }
});

See a working example here: http://jsfiddle/jfriend00/GAwrB/.

Here is the example //CSS

.lowerthan100{
 background-color:red;
 color:white;   
}
.higherthan100{
 background-color:white;   
 color:red;
}

//JAVASCRIPT

$('#mytable td').each(function() {
    if(parseInt($(this).html())>100){
    $(this).addClass("higherthan100");
    }else if (parseInt($(this).html())<100){
    $(this).addClass("lowerthan100");
    }    
 });

//HTML

<table border="1px" id="mytable">
    <tr><td>99</td><td>101</td></tr>
    <tr><td>200</td><td>50</td></tr>
</table>

You can populate more class in CSS and else if statements, if you need more conditions.

Here is the live example http://jsfiddle/kayadiker/DL6U2/2/

本文标签：