同じ表のセル内のテキストとアイコンの色を変更する

Question

各テキスト値に異なる色を設定する方法は分かっています。

まず、私がチェックし、文字列として$ driverStatusを設定しています：

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

次にテーブルを形成し、PHPから文字列を貼り付け：

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

そして最後にテキストをチェックし、変更します

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

ストライドの場合、テキストとアイコンの両方に同じ色を設定する必要がありますngが次のようになります。

$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 (...) { 
     ... 
    } 
}