Jquery – change table cells color based on value

It is sometimes useful to change color of table cells based on values for better presentation and readability. Here is quick code snippet to do this in Jquery and Javascript.

The outcome from the below code will look like:
jquery-change-table-cell-colors-based-on-values-outcome

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table id="table1">
<tr><td>Red</td><td>Normal</td></tr>
<tr><td>Normal</td><td>Red</td></tr>
</table>
<script type="text/javascript">
$(function() {
  $("#table1 td").each(function() {
    if ($(this).text() == 'Red') {
      $(this).css('color', 'red');
    }
  });
});
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments