2017-05-14 8 views
0

각 텍스트 값에 다른 색상을 설정하는 방법을 알고 있습니다.동일한 표 셀의 텍스트 및 아이콘 색상 변경

첫째, 확인하고 문자열로 $ 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>'; 
+1

. 또한 레이아웃을 위해 테이블을 사용하지 마십시오. 더 이상 1997 년이 아닙니다. –

+0

두 번째 var를 정의 할 수 없습니까? 예 :'$ driverStatus = 'Online'; $ driverDisplay = '온라인 '그런 다음 후자를 인쇄 하시겠습니까? 더하기 : 상태에 따라 CSS를 사용하여 행을 스타일링 하시겠습니까? – OldPadawan

답변

0
$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 (...) { 
     ... 
    } 
} 
당신은 그 "위치"요소에 다른 클래스를 추가해야