How to use Javascript in a innerHTML inline css scenario?

Question

I am new to html5 and php. I am wondering how to use javascript in the case of my written code.

I am outputting my database data in a table in HTML. I want the last to output a bit more to the right. But if I use inline css styling I am getting a parse error:

my code:

<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> 

My goal is to change the color of the output of the last <td> depending on wether the data my database according to this logic:

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

****How can I use JS in my current case?****

EDIT: trying out solutions

<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 code

<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

You can't break lines in PHP. Use this:

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

You need to concatenate the ends of each line, or use a heredoc .

Answer 2

Straightforward , if you are using jQuery.

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

Answer 3

hello if you want to use in php and status is last "td" code can be like this:

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>'
}

make sure, that u have highest number in condition on first place, because if you use this code

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

and x is 65 it returns "orange output" instead of "red output" because first statement is true, x is greater than 50

and using jquery for this is simplest solution. comment above, only apply id for table instead of selector "table"

$("#hoverTable td")...