在同一表格单元格中更改文本和图标的颜色

Question

I know how to set a different color for each text value.

First, I'm checking and setting $driverStatus as a string:

if ($log->field_is_online_value == 'online') {
    $driverStatus = 'Online';
} elseif ($log->field_is_online_value == 'offline') {
    $driverStatus = 'Offline';
} else {
    $driverStatus = 'Busy';
}

Then forming the table and pasting the string from PHP:

<table id="locations">
    <tr><th>Driver status</th></tr>
    <tr><td>'.$driverStatus.'</td></tr>
</table>

And finally checking text and changing the color respectively:

var cells = document.getElementById("locations").getElementsByTagName("td");

for (var i = 0; i < cells.length; i++) {
    if (cells[i].innerHTML == "Online") {
        cells[i].style.color = "#5CB85C";
    } else if (cells[i].innerHTML == "Offline") {
        cells[i].style.color = "#D9534F";
    } else if (cells[i].innerHTML == "Busy") {
        cells[i].style.color = "#F0AD4E";
    }
}

I need to set the same color for both text and icon if string looks like this:

$driverStatus = 'Online&nbsp&nbsp<i class="glyphicon glyphicon-ok"></i>';
$driverStatus = 'Offline&nbsp&nbsp<i class="glyphicon glyphicon-off"></i>';
$driverStatus = 'Busy&nbsp&nbsp<i class="glyphicon glyphicon-time"></i>';

Answer 1

$driverStatus = 'Online&nbsp&nbsp<i class="glyphicon glyphicon-ok"></i>';
//...

var cells = document.getElementById("locations").getElementsByTagName("td");

for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    var icon = cell.getElementsByTagName("i")[0];

    if (cell.innerHTML == 'Online&nbsp&nbsp<i class="glyphicon glyphicon-ok"></i>') {
        cell.style.color = "#5CB85C";
        icon.style.color = "#5CB85C";
    } else if (...) {
        ...
    }
}