Change background color of cell when value = "Late"

Question

I have this piece of code:

<style>
    [contenteditable]:hover, [contenteditable]:focus {
        background: #D7D7FF;
        }
</style>

To have the background of a cell from a table change colors when hovered or when focused.

Now one of the columns' name is Status. If the Status is late, meaning the value of that cell is = "Late", I would like the background to change to #FFD7D7. How would I write this in javascript?

Since this <style> is at the beginning of the html file and not inside a CSS I'm a little lost and don't know how to do this.

Any help is greatly appreciated!

Check [this](http://stackoverflow.com/questions/4283141/jquery-change-background-color). It might help you. — MaNKuR, Jun 05 '13 at 17:01
@wachK yes, user changes the status of the cell, the ideal would be to do it onload and when it looses focus to check if the user changed the value of the cell — randomizertech, Jun 05 '13 at 17:07

wachme · Answer 1 · 2013-06-05T19:49:13.830

0

$('.status').on('blur keyup paste', function() {
  $this = $(this);
  $(this).css('background', ($this.text() == 'Late') ? 'red' : 'inherit');
});

where every status cell has status class

edited Jun 05 '13 at 19:49

answered Jun 05 '13 at 17:14

wachme

2,327
20
18

Erlik · Answer 2 · 2013-06-05T17:28:14.020

If you didn't want to use jQuery, here's the code in JavaScript

http://jsfiddle.net/u72yF/3/

color = function() {
    var table = document.getElementById('myTable');
    var trList = table.getElementsByTagName('tr');
    // index of the status column
    var index = -1;
    for (var i = 0; i < trList.length; i++) {
        var tdList = trList[i].getElementsByTagName('td');
        if (index < 0) {
            // we need to find out the status column index first
            for (var j = 0; j < tdList.length; j++) {
                if (tdList[j].id == 'statusColumn') {
                    index = j;
                    break;
                }
            }
        }
        if (tdList[index].innerHTML.trim() == 'Late') {
            // for constant coloring
            trList[i].style.background = '#FFD7D7';

            // for on hover coloring 
            //trList[i].onmouseover = function() { 
            //  this.style.background = '#FFD7D7'; 
            //} 
            //trList[i].onmouseout = function() { 
            //  this.style.background = ''; 
            //}
        }
     } 
 }

I assumed, the code does not know, which column is a Status one, so there is a detection included (by id "statusColumn"). The "Late" string is then searched only in this column, other ones are ignored.

If by coloring you meant on hover coloring rather than constant coloring (which I demonstrated), remove the comment in the bottom part, which implements this.

score 0 · Answer 3 · answered Jun 05 '13 at 19:38

One possibility follows. IMO, this could be expressed much more clearly using jQuery, but since you didn't mention it we'll ride JavaScript bareback on this one:

<!DOCTYPE html>
<html>
<head>
<style>
    [contenteditable]:hover, [contenteditable]:focus {
        background: #D7D7FF;
        }

    .late {
        background-color: #FFD7D7;
    }
</style>
<script type="text/javascript">
    function checkStatus(ev) {
        var statusField = document.getElementById("status-field");

        if (statusField.textContent == 'Late') {
            statusField.className += " late";
        } else {
            statusField.className = statusField.className.replace(/(?:^|\s)late(?!\S)/g , '');
        }

        return true;
    }
</script>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Status</th>
        </tr>
        <tr>
            <td contenteditable="true">Juan Carlos</td>
            <td id="status-field" contenteditable="true" onblur="return checkStatus()">Early</td>
        </tr>
    </table>
</body>
</html>

Change background color of cell when value = "Late"

3 Answers3