How to highlight a row of my table


Tags: php,mysql,css

Problem :

How can I highlight the background color of a row of a table I print this way when I read it's contents from a database? Sometimes two rows. The condition to highlight is the value of the 3rd column.

<?php               
echo "<table id='allocation' class='inlineTable'>";  //style='border: solid 1px black;'
echo "<tr>";
echo "<th class=\"row-1 a_user\">User </th>";
echo "<th class=\"row-2 a_destination\">User </th>";
echo "<th class=\"row-3 a_tremaining\">Time Remaining </th>";
echo "<col = width: 3em />";
echo "</tr>";
echo "<col = width: 3em />";
class TableRows extends RecursiveIteratorIterator {
    function __construct($it) { 
     parent::__construct($it, self::LEAVES_ONLY);
    }
    function current() {
     return "<td style='width: 100px; border: 1px solid black;'>" . parent::current(). "</td>";
    }
    function beginChildren() {
     echo "<tr>";
    }
    function endChildren() {
     echo "</tr>" . "\n";
    }       
}           

$servername = "localhost";
$dbname = "mydb";
$user = 'root';
$port = 3306;

try{
    $conn = new PDO("mysql:host=$servername;port=$port;dbname=$dbname", $user);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);         
    $sql_fetch = $conn->prepare("SELECT user_ID, destination, trem FROM reservation_table");
    $sql_fetch->execute();
    $result = $sql_fetch->setFetchMode(PDO::FETCH_ASSOC);
    foreach(new TableRows2(new RecursiveArrayIterator($sql_fetch->fetchAll())) as $k=>$v) {
        echo $v;
    }
}
catch(PDOException $e) {
     echo "Error: " . $e->getMessage();
}

echo "</table>";
$conn = null;
?>

May I please seek your help? I want to highlight or blink the row when the value in trem (third column) reaches 00:00. My css right now is very basic/simple : https://jsfiddle.net/8Lfj3h0j/

Really need help.



Solution :

since i cannot yet comment, i am going to ask it this way. Can you please be a bit more specific. The trem value looks like a counter. So what you want to do is checking the value of the row with javascript, and if the value is 00.00 you change the css class with javascript.

$('#elementId').toggleClass('yourCSSclass');

If this is not what you mean then by all means feel free to correct me or clarify your question:)

EDIT: in your php function "current" you can check if the value is 00.00 with an if statement. call a javascript function if the value is 00.00 it should look like this:

function current() {
if(parent::current()=="00.00"){
echo '<script type="text/javascript">'
   , '$('#elementId').toggleClass('yourCSSclass');'
   , '</script>'
;}else{}
     return "<td style='width: 100px; border: 1px solid black;'>" . parent::current(). "</td>";
    }

note: i have little experience with the RecursiveIterator classes so i can not tell with certaincy that parent::current()=="00.00" will work, but you should get the general idea of checking the value and calling the js function.

EDIT: copy pasted from comment

<?php

 $i=0; while($array=sqlsrv_fetch_array($data)){ 
 $counterVariable=parent::current();
  //not sure if the above line works this is just theory
 ?>
 <tr data-id="<?php echo $i; ?>">
      <td><?php echo $array['Product_id']; ?></td> 
      <td><?php echo $array['Product_name']; ?></td>
      <td><?php echo $counterVariable ?></td> 
</tr> 
<?php $i=$i+1; }?>

    CSS Howto..

    How to remove white border from blur background image

    How to add multiple css rules to minimize browser reflows?

    How to vertically align a DIV next to an image?

    how to make div static in css

    How to display “Classic” fractions in CSS / Javascript

    How come one jquery script cant effect another jquery script

    how to apply multiple css image filters using jquery

    How to make the content div scrollable without using javascript

    How to position div element right below and left-aligned to another div

    How to change the icon of a JStree node using only css?

    css how to make an elements margin-bottom go to bottom of its container

    How to color specific word in a container using CSS

    How to get the authored style properties of an element?

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    How to make a sliding dashboard similar to medium.com? [closed]

    How to center absolutely positioned elements in css for a pdf

    How do I stop my 'body' from eating my 'foot'

    How to select multiple elements using CSS

    How do I remove the white line under the nav bar

    How to dynamically change css style based on INPUT value?

    how to make a lighting effect using css/html/js [closed]

    Bootstrap: how to stack divs of different heights?

    How to fix the heading in html table using css

    How do I create tabs in vertical alignment?

    How to cancel a too-broad CSS color declaration in a later stylesheet?

    how to keep my slider horizontally centered?

    CSS: How to make this topheader?

    How would you code this: Grid-breaking shapes

    How to make the click logo appear without a href in css/html?

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails