innerHTMLインラインCSSシナリオでJavascriptを使用するには？

Question

私はhtml5とphpの新しいです。私は書かれたコードの場合にjavascriptを使用する方法が不思議です。

データベースのデータをHTML形式のテーブルに出力しています。最後の出力をもう少し右側にしたい。しかし、私は、インラインCSSスタイルを使用している場合、私はパースエラーを取得しています：

私のコード：

<table class="scroll"> 
    <thead style="background-color: #99E1D9; color: #705D56;"> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Last Update</th> 
      <th style="padding-left: 30%;">Status</th> 
     </tr> 
    </thead> 
     <tbody id="hoverTable"> 
       <?php 

        $connection = mysql_connect('localhost', 'root', ''); 

        mysql_select_db('patientdb'); 

        $query = "SELECT id, name, date, status FROM clients"; 

        $result = mysql_query($query); 

        while($row = mysql_fetch_array($result)){ //looping through results 
        echo "<tr> 
          <td>" . $row['id'] . "</td> 
          <td>" . $row['name'] . "</td> 
          <td>" . $row['date'] . "</td> 
          <td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> //my question is regarding this line!!!! 
         </tr>"; //$row['index'] the index here is a field name 
        } 

        mysql_close(); 

       ?> 
</tbody> 
</table> 

を私の目標は、かかるデータ天気を自分のデータベースをに応じて、最後の<td>の出力の色を変更することですどのように私は私の現在のケースでJSを使用することができます****

if (x > 60) { 
    echo: "orange output"; 
}elseif (x >50) { 
    echo: "red output"; 
}else{ 
echo: "green output"; 
} 

****

EDIT：このロジックに？解決策を試しますあなたは、PHPの行を壊すことができないの

<script> 
    $('#hoverTable td').css('background-color',function(){ 
     var x = DATA FROM MY DATABASE; 
      if (x > 50) { 
      echo: "orange output"; 
      }elseif (x >60) { 
      echo: "red output"; 
      }else{ 
      echo: "green output"; 
      } 
    }); 
    </script> 

表コード

<table class="scroll"> 
    <thead style="background-color: #99E1D9; color: #705D56;"> 
     <tr> 
      <th>ID</th> 
      <th>Naam Client</th> 
      <th>Laatste Update</th> 
      <th style="padding-left: 30%;">Status</th> 
     </tr> 
    </thead> 
     <tbody id="hoverTable"> 
       <?php 

        $connection = mysql_connect('localhost', 'root', ''); //The Blank string is the password 
        mysql_select_db('patientdb'); 

        $query = "SELECT id, naam, datum, status FROM clients"; //You don't need a ; like you do in SQL 
        $result = mysql_query($query); 

        while($row = mysql_fetch_array($result)){ 
         $statusClass = 'class="green output"'; 

         if($row['status'] > 60){ 
          $statusClass = 'class="red output"'; 
         }else if($row['status'] > 50){ 
          $statusClass = 'class="orange output"'; 
         } 
         echo 
         '<tr> 
         <td>' . $row["id"] . '</td> 
         <td>' . $row["name"] . '</td> 
         <td>' . $row["date"] . '</td> 
         <td class="fa fa-circle" style="color: grey; margin-left: 30%;" .$statusClass."></td> 
         </tr>'; 
        } 
        mysql_close(); //Make sure to close out the database connection 
       ?> 
</tbody> 
</table> 

Answer 1

こんにちは：

while($row = mysql_fetch_array($result)){ 
    $statusClass = 'green output'; 

    if($row['status'] > 60){ 
     $statusClass = 'red output'; 
    }else if($row['status'] > 50){ 
     $statusClass = 'orange output'; 
    } 

    echo '<tr> 
    <td>' . $row["id"] . '</td> 
    <td>' . $row["name"] . '</td> 
    <td>' . $row["date"] . '</td> 
    <td class="fa fa-circle '.$statusClass.'" style="color: grey; margin-left: 30%;"></td> 
</tr>' 
} 

ので、uは最初の場所での条件で最高の数を持っていることを、確認してくださいあなたはこのコードを使用している場合

if (x > 50) { 
    echo: "orange output"; 
}elseif (x >60) { 
    echo: "red output"; 
}else{ 
    echo: "green output"; 
} 

およびxは、それが最初の文が真であるので、xが50

以上である代わりに、「赤出力」の「オレンジ色の出力を」返す65です

これをjqueryを使用するのが最も簡単な方法です。上記のコメントは、セレクタ「テーブル」の代わりにテーブルにidを適用するだけです

$("#hoverTable td")... 

Answer 2

。これを使用して：あなたは、各ラインの両端を連結、またはheredocを使用する必要が

echo "<tr>". 
"<td>" . $row['id'] . "</td> ". 
"<td>" . $row['name'] . "</td> ". 
"<td>" . $row['date'] . "</td>". 
"<td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> ". 
"</tr>"; 

。

Answer 3

jQueryを使用している場合は、簡単です。

あなたは、PHPで使用するとステータスが最後に「TD」のコードであれば、このようにすることができ

$('#hoverTable td:last-child').css('background-color',function(){ 
    var x = /*your target argument*/; 
    if(x > 50){return 'orange '}; 
});