I am trying to change the color of each row in a table only if the text inside the 4th cell is "DELAYED". I have created a function for this purpose, but the color is not changing as expected...
function assignColor()
{
//retrieve all tr elements from the document
var x = document.getElementsByTagName("tr");
for(var i = 0; i < x.length; i++)
{
//Check if the text content in the 4th cell of the tr is "DELAYED"
if(x[i].cells[3].textContent == "DELAYED")
{
x[i].style.backgroundColor = "red";
}
}
}
I suspect there might be an issue with how I am populating the table from JavaScript to HTML.
function printFlights(arrayOfFlight)
{
//Add tr elements based on the length of the array
for(var i = 0; i < arrayOfFlight.length; i++)
{
//create a tr element
var tr = document.createElement("tr");
//Insert cells into the tr using object properties
tr.insertCell(0).innerHTML =
formatDate(arrayOfFlight[i].arrivalDate);
tr.insertCell(1).innerHTML =
formatTime(arrayOfFlight[i].arrivalDate);
tr.insertCell(2).innerHTML = arrayOfFlight[i].destination;
tr.insertCell(3).innerHTML = arrayOfFlight[i].status;
tr.insertCell(4).innerHTML = arrayOfFlight[i].airplane;
tr.insertCell(5).innerHTML = arrayOfFlight[i].gate;
//add tr to tbody
tableBody.appendChild(tr);
}
}