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

Question

只有当第 4 个单元格内的文本内容等于“DELAYED”时，我才想修改表格内每一行的颜色，我创建了一个函数来做到这一点，但没有颜色改变......

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

}

我认为我将表格从 js 填充到 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);
    }
}

标签： javascripthtmlcssdom

Answer 1

您的代码正在运行：

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>