2017-05-14 28 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

2番目の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 (...) { 
     ... 
    } 
} 
関連する問題