Changing Background Cell of Table Depending on Value

Changing background cell of table depending on value

This isn't possible with just CSS (though you can use JavaScript to assign classes to enable it to be partially implemented with CSS). To use plain JavaScript, rather than a library:

var table = document.getElementById('tableID');
var tbody = table.getElementsByTagName('tbody')[0];
var cells = tbody.getElementsByTagName('td');

for (var i=0, len=cells.length; i<len; i++){
    if (parseInt(cells[i].innerHTML,10) > 5){
        cells[i].style.backgroundColor = 'red';
    }
    else if (parseInt(cells[i].innerHTML,10) < -5){
        cells[i].style.backgroundColor = 'green';
    }
}

JS Fiddle demo.

Or, to use CSS classes:

var table = document.getElementById('tableID');
var tbody = table.getElementsByTagName('tbody')[0];
var cells = tbody.getElementsByTagName('td');

for (var i=0, len=cells.length; i<len; i++){
    if (parseInt(cells[i].innerHTML,10) > 5){
        cells[i].className = 'red';
    }
    else if (parseInt(cells[i].innerHTML,10) < -5){
        cells[i].className = 'green';
    }
}

JS Fiddle demo.

References:

• className.
• getElementById().
• getElementsByTagName().
• innerHTML.
• parseInt().
• style.

Conditional table cell background color depending on value

To go with one cell, using your example that I copied for two others, changing the ID, could look something like this:

let listItem = {};
listItem.Title = 'subjectivegrading';
listItem.c3t9 = 5;

if (listItem.Title === "subjectivegrading") {
   $("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
   $("#SubjectiveDays").addClass('red');
}

listItem.c3t9 = 10;
if (listItem.Title === "subjectivegrading") {
   $("#SubjectiveDays2").text(listItem.c3t9 + " Business Days");
   $("#SubjectiveDays2").addClass('yellow');
}

listItem.c3t9 = 15;
if (listItem.Title === "subjectivegrading") {
   $("#SubjectiveDays3").text(listItem.c3t9 + " Business Days");
   $("#SubjectiveDays3").addClass('green');
}

.red {
   color: red;
}

.yellow {
   color: yellow;
}

.green {
   color: green;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays"></div></td>
      <td></td>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays2"></div></td>
      <td></td>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays3"></div></td>
      <td></td>
 </tr>
 </table>

React: How to change Table cell background depending on cell value in React table

Just use a ternary operator and pass a class or value in

<td key="Questions" className={value > 0.25 ? 'greenclass' : 'redclass' }>

or

<td key="Questions" styles={{ background: value > 0.25 ? 'green' : 'red' }}>

---

Update for 3+ classes

I would use an outside function where you have an if/else or switch statement return className

Have this function outside the render

resolveClass = (value) => {
    let className = ''

    switch (true) {
        case (value > 0.25):
            className = 'green'
            break;
        case (value < 0):
            className = 'red'
            break;
        default:
            break
    }

    return className
}

Then inside the render <td key="Questions" className={resolveClass(paa.Questions)}>

Change background color of HTML table cell depending on drop-down list value?

Is this what you're looking for ?

document.querySelector('select').onchange=changeEventHandler;

var indicator = document.getElementById("color-indicator");

function changeEventHandler(event) {

    indicator.classList = this.value;

}

.MRG{ background-color:#82E0AA; }

.MRA{ background-color:#F5B041; }

.MRR{ background-color:#EC7063; }

<table class="table table-hover table-condensed" border="1px">

  <thead>

    <tr>

   <td>Made Ready</td>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td id="color-indicator">

        <select>

          <option value="MRR">Red</option>

          <option value="MRA">Amber</option>

          <option value="MRG">Green</option>

        </select>

      </td>

    </tr>

  </tbody>

</table>

Change background of cell in table depending on his value with Jquery?

var $table = $("#tbTodos");
$table.find("th").each(function(columnIndex){

    var values = [];

    var $tds = $table.find("td").filter(function(){
        return $(this).index() == columnIndex;
    });

    $tds.each(function(index, el){
        var val = parseInt($.trim($(el).text()));
        values.push(val);
    });

    values.sort(function(a, b){return b-a});

    $tds.each(function(index, el){
        var val = parseInt($.trim($(el).text())),
            cls,
            vl = values.length;

        if(val == values[vl-1])            cls = 'highest';
        else if(val == values[0])          cls = 'lowest';

        if(vl > 3 && val == values[vl-2])  cls = 'highest2';
        if(vl > 3 && val == values[1])     cls = 'lowest2';

        $(el).addClass(cls);
    });
});

jQuery to change background on table row based on values of two cells within that row

Grab all the <tr> elements and filter that down to the ones with the <td> elements matching your requirements.

Once you have that filtered collection, set the background colour.

const MATCH = [{
  col: 0,
  chr: "M"
}, {
  col: 2,
  chr: "P"
}]

$("tr").filter((_, tr) => {
  // get the <td> children
  const cells = $(tr).children("td")
  // Ensure each MATCH appears in each cell respectively
  return MATCH.every(({ col, chr }) => cells.eq(col).text().includes(chr))  
}).css("background-color", "#ccf")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<table border="1">
  <tr>
    <td>No capital "m" here</td>
    <td>foo</td>
    <td>No capital "p" here</td>
  </tr>
  <tr>
    <td>Mo Money</td>
    <td>bar</td>
    <td>Mo Problems</td>
  </tr>
  <tr>
    <td>Pass the</td>
    <td>baz</td>
    <td>Mayo please</td>
  </tr>
</table>

Change Background on Table Cell based on Data in Vue

All you need to do is assign a class conditionally to each element in the loop:

<tr 
  v-for="(member, index) in members" 
  :key="index" 
  :class="{
    'gold-star': member.rank === 'Gold star',
    'silver-star': member.rank === 'Silver star',
    'bronze-star': member.rank === 'Bronze star',
  }"
>
...

Do the same thing for the points: 'change-rank': member.total > 50

You can also move this code to a method and make your HTML cleaner:

<tr 
  v-for="(member, index) in members" 
  :key="index" 
  :class="getTableClasses(member)"
>

...

methods: {
  getTableClasses(member) { 
   let color = member.rank.toLowerCase().replace(' ', '-')
   let changeRank = member.total > 50 ? 'change-rank' : ''
   return `${color} ${changeRank}`
  }
}

change background of table cell depending on value

For one, you're using the # character instead of the . character for the class. Also it's not val() it's text() for non-input elements. Is there any html inside the td?

You cannot assign a class to anything w/o it being an element. Throw a span in there. Also you were going through the <tr> instead of the <td> to assign the backgorund color to.

Also needed another check on mouseout which checked to see if the text was Yes and the class was high so it didn't apply another background color.

jQuery

$(function () {
  if ($('.high').text() == 'Yes') {
      $('.high').parent().css('background-color', '#000033');
  }

  $("#tfhover")
    .hide()
    .fadeIn(1500)
    .find('td')
    .hover(
       function () {
           $(this).css('background-color', '#fff');
       }, 
       function () {
            if ($(this).children().hasClass('high') && $(this).children().text() == 'Yes') {
               $(this).css('background-color', '#000033');
            } else {
               $(this).css('background-color', '#d4e3e5');
            }
       }
    );
});

HTML

<table id="tfhover" class="tftable" border="1">
 <tr>
    <th>JobID</th>
    <th>OrderID</th>
    <th>Location</th>
    <th>EstimatedCompletion</th>
    <th>HighPriority</th>
    <th>LastUpdated</th>
    <th>Comments</th>
    <th>Status</th>
    <th></th>
 </tr>
 <tr>
    <td>JobID</td>
    <td>OrderID</td>
    <td>LocationName</td>
    <td>EstimatedCompletion</td>
    <td><span class="high">Yes</span></td>
    <td>LastUpdated</td>
    <td>Comments</td>
    <td>Status</td>
    <td></td>
 </tr>
</table>

---

Related Topics