I have a table which has column that contain status. Two statuses, “Open” and “Closed” are in the last column of the table.
I would like to change the cell text color of “Closed” to red and the row backround color of “Open” to green.
Any advice would be helpful.
EDIT: I would like to find out how to assign above described colors based on text context (Open, Closed) in the last column of the table with javascript.
HTML:
JavaScript
x
59
59
1
<div id="table">
2
<div class="row">
3
<div class="cell">
4
<div class="dataText">a</div>
5
</div>
6
<div class="cell">
7
<div class="dataText">b</div>
8
</div>
9
<div class="cell">
10
<div class="dataText">c</div>
11
</div>
12
<div class="cell">
13
<div class="dataText">Open</div>
14
</div>
15
</div>
16
<div class="row">
17
<div class="cell">
18
<div class="dataText">1</div>
19
</div>
20
<div class="cell">
21
<div class="dataText">2</div>
22
</div>
23
<div class="cell">
24
<div class="dataText">3</div>
25
</div>
26
<div class="cell">
27
<div class="dataText">Closed</div>
28
</div>
29
</div>
30
<div class="row">
31
<div class="cell">
32
<div class="dataText">c</div>
33
</div>
34
<div class="cell">
35
<div class="dataText">d</div>
36
</div>
37
<div class="cell">
38
<div class="dataText">e</div>
39
</div>
40
<div class="cell">
41
<div class="dataText">Closed</div>
42
</div>
43
</div>
44
<div class="row">
45
<div class="cell">
46
<div class="dataText">a</div>
47
</div>
48
<div class="cell">
49
<div class="dataText">b</div>
50
</div>
51
<div class="cell">
52
<div class="dataText">c</div>
53
</div>
54
<div class="cell">
55
<div class="dataText">Open</div>
56
</div>
57
</div>
58
</div>
59
CSS:
JavaScript
1
11
11
1
#table {
2
display: table;
3
}
4
.row {
5
display: table-row;
6
}
7
.cell {
8
display: table-cell;
9
padding: 15px;
10
}
11
Advertisement
Answer
Easy!
JavaScript
1
2
1
<div class="row open">
2
and
JavaScript
1
2
1
.row.open { background: green; }
2
for the row, and
JavaScript
1
2
1
<div class="cell closed">
2
and
JavaScript
1
2
1
.dataText.closed { color: red; }
2
for the cell
A quick’n’dirty(!) solution to iterate over each row and add the classes dynamically:
JavaScript
1
13
13
1
var rows = document.querySelectorAll("div#table .row"); // get all rows
2
[].forEach.call(rows, function(row) { // iterate over each row
3
var cell = row.querySelector(".cell:last-child .dataText"); // get the dataText Element in the last cell in each row
4
var cellContent = cell.innerHTML; // read out cell content
5
if (cellContent === "Open") { // it says "Open"
6
row.classList.add("open"); // add "open" class to row
7
cell.classList.add("open"); // add "open" class to status cell
8
} else if (cellContent === "Closed") { // it says "Closed"
9
row.classList.add("closed"); // add "closed" class to row
10
cell.classList.add("closed");// add "closed" class to status cell
11
}
12
});
13
Untested, but should work.