CODEWITHSUNDEEP
phpjavascripthtml
Raistlin
Raistlin

Reputation: 1127

How can I dynamically fill a table-cell with background-color?

I've got a problem with a school schedule, wich is coded in php/html. The lessons are filled in a html table (surprise!!) and a filled cell has to get a background color. The problem is, that the table is dynamically filled with data, so it's not possible to give the td-tag the background-color. Here is my code:

echo"<td id='cell' style='width:15%'>";
foreach($plan->result as $res){
   if($res->date == "20131007" && $item->startTime == $res->startTime){
      foreach ($res->kl as $kl){
         echo getKlasseById($ch, $kl->id).", ";
      }
      echo"<script type=\"text/javascript\">
      var td = document.getElementById('cell');
      td.style.backgroundColor='#FF8000';</script>";
   }
}

What this does is filling the fist cell of the table with the background-color and then nothing (concerning the color).

EDIT

Ok, I solved my problem. As my programming prof would say, I tried to shoot pigeons with fusion bombs. I just put a <div> around the foreach-loop with the desired background-color. Anyway, thank you for your help.

Upvotes: 0

Views: 2398

Answers (2)

Martijn
Martijn

Reputation: 16103

Why like that? Why not use PHP instead. All these samll Javascript elements only slow down the page, and makes the page slower to parse by browsers. PHP+ some classes are way more efficient

foreach($plan->result as $res){
    $backgroundColor = "";
    if($res->date == "20131007" && $item->startTime == $res->startTime){
      foreach ($res->kl as $kl){
         echo getKlasseById($ch, $kl->id).", ";
     }
    $backgroundColor = "#FF8000";
   }
}
echo"<td id='cell' style='width:15%;background-color: ".$backgroundColor."'>";

Small sidenote: Your code is a bit unclear so I'm not sure wether I put the code in the proper order or with the proper statements, but you catch my drift

Upvotes: 0

briosheje
briosheje

Reputation: 7436

Create a CSS class with the desired background color:

.colored { background-color: yourcolor; }

And, when you echo the <td>, add the class to it.

Instead of rendering the td BEFORE the if, you may do that inside the if, if that's the main problem!..

echo "<td id=\"cell\" class=\"colored\">";

To be more clear, I mean that instead of this:

echo"<td id='cell' style='width:15%'>";
foreach($plan->result as $res){
   if($res->date == "20131007" && $item->startTime == $res->startTime){
      foreach ($res->kl as $kl){
         echo getKlasseById($ch, $kl->id).", ";
      }
      echo"<script type=\"text/javascript\">
      var td = document.getElementById('cell');
      td.style.backgroundColor='#FF8000';</script>";
   }
}

You may do this:

foreach($plan->result as $res){
   if($res->date == "20131007" && $item->startTime == $res->startTime){
      echo"<td id='cell' style='width:15%' class='colored'>";
      foreach ($res->kl as $kl){
         echo getKlasseById($ch, $kl->id).", ";
      }
   }
   else {
     echo"<td id='cell' style='width:15%'>";
     // Whatever goes into the else, if needed.
   }
}

Anyway.. You're not closing the <td>, are you? :)

Upvotes: 1

Related Questions