如何使用背景颜色动态填充表格单元格?

时间:2013-09-09 09:16:14

标签: php javascript html

我的学校日程安排有问题,用php / html编码。课程填写在html表格中(惊喜!!),填充的单元格必须获得背景颜色。问题是,表是动态填充数据的,所以不可能给td-tag指定背景颜色。这是我的代码:

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

这样做是用背景颜色填充表格的第一个单元格,然后没有任何东西(关于颜色)。

修改

好的,我解决了我的问题。正如我的编程教授所说,我试图用融合炸弹射击鸽子。我只是在foreach循环周围放了<div>所需的背景颜色。 无论如何,谢谢你的帮助。

2 个答案:

答案 0 :(得分:1)

创建具有所需背景颜色的CSS类:

.colored { background-color: yourcolor; }

并且,当您回显<td>时,将类添加到其中。

而不是在if之前渲染td,你可以在if中执行,如果这是主要问题!...

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

为了更清楚,我的意思是代替这个:

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

你可以这样做:

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

无论如何......你没有关闭<td>,是吗? :)

答案 1 :(得分:0)

为什么这样?为什么不使用PHP代替。所有这些小的Javascript元素只会减慢页面的速度,并使浏览器解析页面的速度变慢。 PHP +一些类的效率更高

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

小旁注:你的代码有点不清楚所以我不确定我是否按正确的顺序或正确的陈述编写代码,但你抓住了我的漂移