If the status is RECIEVED then background colour is Green

Viewed 75

I want to highlight the row color green if the status in column 7 contains rows with "RECIEVED" value.

The below code is to display the search results data associated with Google sheets to google webapp.

var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;

searchResultsBox.innerHTML = "";

resultsArray.forEach(function(r){

var tr = template.cloneNode(true);
var l1Column = tr.querySelector(".L1");
var l2Column = tr.querySelector(".L2");
var l3Column = tr.querySelector(".L3");
var l4Column = tr.querySelector(".L4");
var l5Column = tr.querySelector(".L5");
var l6Column = tr.querySelector(".L6");
var l7Column = tr.querySelector(".L7");
var l8Column = tr.querySelector(".L8");

l1Column.innerHTML = r[0];
l2Column.innerHTML = r[1];
l3Column.innerHTML = r[2];
l4Column.innerHTML = r[3];
l5Column.innerHTML = r[4];
l6Column.innerHTML = r[5];
l7Column.innerHTML = r[6];
if (l7Column.innerHTML = r[6] === "RECEIVED") row.style.backgroundColor = "green";
l8Column.innerHTML = r[7];


searchResultsBox.appendChild(tr);


});

}

I added this if (l7Column.innerHTML = r[6] === "RECEIVED") row.style.backgroundColor = "green"; but the status showing as false in column 7

screenshot of the search panel

Where did I go wrong?

1 Answers

I think that row is not used in your script. And, in this case, how about the following modification?

From:

if (l7Column.innerHTML = r[6] === "RECEIVED") row.style.backgroundColor = "green";

To:

if (r[6] === "RECEIVED") tr.querySelector("tr").style.backgroundColor = "green";

Added:

About your following new question,

you are so great in script :) than you. it worked, I have a another query, The status doesn't only contain the word RECIEVED but sometime it may have some other words like RECIEVED TODAY or RECIEVED YESTERDAY, in that case how should the script change?

When r[6] is RECIEVED TODAY and RECIEVED YESTERDAY, you want to set the background color to green color. In this case, how about the following modification?

From:

if (l7Column.innerHTML = r[6] === "RECEIVED") row.style.backgroundColor = "green";

To:

if (["RECIEVED TODAY", "RECIEVED YESTERDAY"].includes(r[6])) tr.querySelector("tr").style.backgroundColor = "green";

Or, when r[6] includes RECIEVED, you want to set the background color, how about the following modification?

To:

if (r[6].toString().includes("RECIEVED")) tr.querySelector("tr").style.backgroundColor = "green";

Note:

  • When I saw your question, you are using RECEIVED. But in your replying, you use RECIEVED. I think that the spel of RECEIVED is different from RECIEVED. In this addetional modification, RECIEVED is used. Please be careful this.
Related