如何使用DOM更改表格中单行的背景颜色

Question

I want to modify the color of each row inside a table only if the text content inside the 4th cell is equal to "DELAYED" I maked a function to do that but no color changing...

function assignColor()
{
    //getting all the tr elements from document
    var x = document.getElementsByTagName("tr");

    for(var i = 0; i < x.length; i++)
    {
        //Accessing to text Content in the 4th cell of the tr
        if(x[i].cells[3].textContent == "DELAYED")
        {
            x[i].style.backgroundColor = "red";
        }
    }

}

i think it's something wrong with the way i populate the table from js to html

function printFlights(arrayOfFlight)
{
    //I insert tr till the length of an array
    for(var i = 0; i < arrayOfFlight.length; i++)
    {

        //creating tr element
        var tr = document.createElement("tr");

        //Inserting cells inside tr using propertys of an object

        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);
    }
}

Answer 1

Your code is working:

 function assignColor() { //getting all the tr elements from document var x = document.getElementsByTagName("tr"); for(var i = 0; i < x.length; i++) { //Accessing to text Content in the 4th cell of the tr if(x[i].cells[3].textContent == "DELAYED") { x[i].style.backgroundColor = "red"; } } } assignColor(); 

 <table> <tr> <td>a</td> <td>a</td> <td>c</td> <td>DELAYED</td> </tr> </table> 

Answer 2

Your code seems to work fine, with one exception - if the <td> elements in your HTML have any whitespace in them (like this demo below), then your code needs to .trim() the content of the cells before the string comparison.

See below:

 function assignColor() { var x = document.getElementsByTagName("tr"); for (var i = 0; i < x.length; i++) { if (x[i].cells[3].textContent.trim() == "DELAYED") { x[i].style.backgroundColor = "red"; } } } assignColor(); 

 <table border="1"> <tr> <td> Col 1 </td> <td> Col 2 </td> <td> Col 3 </td> <td> Col 4 </td> </tr> <tr> <td> Col 1 </td> <td> Col 2 </td> <td> Col 3 </td> <td> DELAYED </td> </tr> 

Answer 3

Try it this way, it will check for Delayed regardless of the cell number.

 function assignColor() { var x = document.querySelectorAll('tr td'); for(var i = 0; i < x.length; i++) { if(x[i].textContent == "DELAYED") { x[i].style.backgroundColor = "red"; } } } 

 <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>DELAYED</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>DELAYED</td> </tr> <tr> <td>1</td> <td>2</td> <td>DELAYED</td> <td>4</td> </tr> </table>