Can I make a table cell have a different background color if the value =< a particular number with jquery or PHP?
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 ce开发者_运维技巧ll =< "3000", background-color=#FF0000
Is there a way to make this work in reality?
Erik
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.net/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.net/kayadiker/DL6U2/2/
精彩评论