I have a website where values are given in a table. I would like them to be colored based on the numbers. I used JavaScript code, but it seems to work correctly for <div> and <p>, but not correctly for <td>. What am I doing wrong?
$(document).ready(function() {
var mc = {
'0-19': 'red',
'20-59': 'orange',
'60-100': 'green'
};
function between(x, min, max) {
return x >= min && x <= max;
}
var dc;
var first;
var second;
var th;
$('td').each(function(index) {
th = $(this);
dc = parseInt($(this).attr('data-rawvalue'), 10);
$.each(mc, function(name, value) {
first = parseInt(name.split('-')[0], 10);
second = parseInt(name.split('-')[1], 10);
console.log(between(dc, first, second));
if (between(dc, first, second)) {
th.addClass(value);
}
});
});
});.red {
color: red
}
.orange {
color: orange
}
.green {
color: green
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<td class="listViewEntryValue" data-name="cf_1104" title="57" data-rawvalue="57" data-field-type="integer">
<span class="fieldValue">
<span class="value">
<span align="right">57</span>
</span>
</span>
</td>I would like the numerical values in the table to be colored based on the number.
New contributor
Andrzej Majewski Phones Rescue is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1