Ändern der Farbe für Text und Symbol in der gleichen Tabelle Zelle

Question

Ich weiß, wie Sie eine andere Farbe für jeden Textwert festlegen.

Zuerst Ich überprüfe und Einstellung $ driverStatus als String:

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

dann die Tabelle bilden und die Zeichenfolge PHP einfügen:

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

Und schließlich Text überprüft und die sich wandelnde Farbe entsprechend:

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

Ich muss die gleiche Farbe für Text und Ikone wenn stri einstellen ng sieht wie folgt aus:

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