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!
3 answers
solution1
0 2013-06-05 17:14:36
$('.status').on('blur keyup paste', function() {
$this = $(this);
$(this).css('background', ($this.text() == 'Late') ? 'red' : 'inherit');
});
where every status cell has status class
solution2
0 2013-06-05 17:23:05
If you didn't want to use jQuery, here's the code in JavaScript
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.
solution3
0 2013-06-05 19:38:40
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.