Change table cell text color and background of row based on text in the table without table tag

Question

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:

<div id="table">
    <div class="row">
        <div class="cell">
            <div class="dataText">a</div>
        </div>
        <div class="cell">
            <div class="dataText">b</div>
        </div>
        <div class="cell">
            <div class="dataText">c</div>
        </div>
        <div class="cell">
            <div class="dataText">Open</div>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <div class="dataText">1</div>
        </div>
        <div class="cell">
            <div class="dataText">2</div>
        </div>
        <div class="cell">
            <div class="dataText">3</div>
        </div>
        <div class="cell">
            <div class="dataText">Closed</div>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <div class="dataText">c</div>
        </div>
        <div class="cell">
            <div class="dataText">d</div>
        </div>
        <div class="cell">
            <div class="dataText">e</div>
        </div>
        <div class="cell">
            <div class="dataText">Closed</div>
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <div class="dataText">a</div>
        </div>
        <div class="cell">
            <div class="dataText">b</div>
        </div>
        <div class="cell">
            <div class="dataText">c</div>
        </div>
        <div class="cell">
            <div class="dataText">Open</div>
        </div>
    </div>
</div>

CSS:

#table {
    display: table;
}
.row {
    display: table-row;  
}
.cell {
    display: table-cell;
    padding: 15px;
}

Answer 1

Easy!

<div class="row open">

and

.row.open { background: green; }

for the row, and

<div class="cell closed">

and

.dataText.closed { color: red; }

for the cell

A quick'n'dirty(!) solution to iterate over each row and add the classes dynamically:

var rows = document.querySelectorAll("div#table .row"); // get all rows
[].forEach.call(rows, function(row) { // iterate over each row
  var cell = row.querySelector(".cell:last-child .dataText"); // get the dataText Element in the last cell in each row
  var cellContent = cell.innerHTML; // read out cell content
  if (cellContent === "Open") { // it says "Open"
      row.classList.add("open"); // add "open" class to row
      cell.classList.add("open"); // add "open" class to status cell
  } else if (cellContent === "Closed") { // it says "Closed"
      row.classList.add("closed"); // add "closed" class to row
      cell.classList.add("closed");// add "closed" class to status cell
  }
});

Untested, but should work.

Answer 2

You can use document.querySelctorAll() along with this selector .cell:last-child .dataText to get all the last columns , check over their text contents, and change their background color accordingly.

This is how should be your code:

Array.from(document.querySelectorAll(".cell:last-child .dataText")).forEach(function(cell) {
  //We select the whole row with cell.parentNode.parentNode
  if (cell.textContent == "Open")
    cell.parentNode.parentNode.style.backgroundColor = "green";
  else if (cell.textContent == "Closed")
    cell.style.color = "red";
});

Demo:

This is a live working Demo:

 Array.from(document.querySelectorAll(".cell:last-child .dataText")).forEach(function(cell) { if (cell.textContent == "Open") cell.parentNode.parentNode.style.backgroundColor = "green"; else if (cell.textContent == "Closed") cell.style.color = "red"; });

 #table { display: table; } .row { display: table-row; } .cell { display: table-cell; padding: 15px; }

 <div id="table"> <div class="row"> <div class="cell"> <div class="dataText">a</div> </div> <div class="cell"> <div class="dataText">b</div> </div> <div class="cell"> <div class="dataText">c</div> </div> <div class="cell"> <div class="dataText">Open</div> </div> </div> <div class="row"> <div class="cell"> <div class="dataText">1</div> </div> <div class="cell"> <div class="dataText">2</div> </div> <div class="cell"> <div class="dataText">3</div> </div> <div class="cell"> <div class="dataText">Closed</div> </div> </div> </div>

Answer 3

Before </body> place:

<script>
  Array.prototype.slice.call(document.querySelectorAll('.cell:last-of-type'))
  .forEach(function (cell) {
    cell.parentElement.className = 'row ' + (cell.innerText === 'Open' ? 'open' : 'closed');
  });
</script>

And to your CSS append:

.row.open {
  background: green;
}
.row.closed {
  color: red;
}

Answer 4

试试这个：

<span style="color:green">open</span>