Question

下面的代码回显了一个HTML表格，其中填充了MySQL数据库中的值。当名为“topten”的字段等于1时，CSS会发生变化。

当“topten”等于1时，我想要一个100像素高，800像素宽和颜色#A6FFFF;的矩形背景。当“topten”不等于1时，我希望没有背景。我想我可以通过在下面有“backgroundtt”的地方应用一些CSS来做到这一点。我怎么能这样做？

$result = mysql_query($sqlStr);

$arr = array(); 
echo "<table class=\"samplesrec\">";
while ($row = mysql_fetch_array($result)) {         
  if($row["topten"] == 1) {    
     echo '<div class="backgroundtt"></div>';
     echo '<tr class="class2a">';
     echo '<td class="sitename1"></td>';
     echo '</tr>';
     echo '<tr class="class2b">';
     echo '<td class="sitename2name"></td>';
     echo '</tr>';
     echo '<tr class="class2c">';
     echo '<td class="sitename2"></td>';
     echo '</tr>';
  } else {      
    echo '<tr class="class3a">';
    echo '<td class="sitename1"></td>';
    echo '</tr>';
    echo '<tr class="class3b">';
    echo '<td class="sitename2name"></td>';
    echo '</tr>';
    echo '<tr class="class3c">';
    echo '<td class="sitename2"></td>';
    echo '</tr>';
  }
}

echo "</table>";

Answer 1

表和表行标记之间的div是无效的表语法。这可能是您的问题的原因。

Answer 2

执行此操作的最简单方法可能是将其写入内联，如下所示：

if($row["topten"]==1){
    echo '<div style="position:absolute;width:800px;height:100px;background-color:#A6FFFF;z-index:-1;"></div>';
}
echo "<table class=\"samplesrec\">";
while ($row = mysql_fetch_array($result)) {         
   if($row["topten"] == 1) {    

       // move div above table to make it proper markup.
       echo '<tr class="class2a">';

但是，假设容器位于相对位置，或者您的表位于页面上的0,0，没有边距。

如果我是你，我会在<td>添加一个类名，而不是添加元素。

Answer 3

如果表格内的div不在实际的表格单元格中，则无效标记。你想要做的是将一个类应用于topten调用中的三行，这样该部分可能如下所示：

 if($row["topten"] == 1) {    
 echo '<tr class="class2a coolBackgroundClass">';
 echo '<td class="sitename1"></td>';
 echo '</tr>';
 echo '<tr class="class2b coolBackgroundClass">';
 echo '<td class="sitename2name"></td>';
 echo '</tr>';
 echo '<tr class="class2c coolBackgroundClass">';
 echo '<td class="sitename2"></td>';
 echo '</tr>';
 }

然后你可以在css中设置背景颜色：

.coolBackgroundClass { background-color: #A6FFFF; }

因此，不要试图将div放在这些行后面（它的位置是无效标记），你只需设置三行中每一行的背景颜色，使其看起来像在大矩形框上。此外，如果您的行的大小增加，则框会随之增长。

已修改：错过了css标记中的分号

当字段等于1时，将显示CSS背景矩形

3 个答案: