PHP交替颜色

时间：2010-05-31 01:51:30

标签： php 

  $dbc = mysql_connect('localhost','root','') or die (mysql_error());
  mysql_select_db('payroll') or die (mysql_error());
 $sql = "SELECT * FROM employee ORDER BY employee_id DESC";

  $result = mysql_query($sql);

  while($row = mysql_fetch_array($result)) {

  echo "
  <tr>
  <td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
  <td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999;  padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
  </tr>
  ";

  }

我想在循环中添加交替颜色。我应该添加什么代码？

11 个答案:

答案 0 :(得分：7)

$rowCount = 0;
$colorOne = '#ffffff';
$colorTwo = '#f3f3f3';

while($row = mysql_fetch_array($result)){
        $rowColor = ($rowCount % 2) ? $colorOne : $colorTwo; 
        echo "<element bgcolor='$rowColor'></element>";
$rowCount++;
}

Edited after @Jayrox comment.

答案 1 :(得分：3)

使用CSS类而不是内联样式。它们更容易操纵。然后在CSS中为.myclass_row_0和.myclass_row_1设置备用行颜色的样式，并为列样式设置.col1和.col2。

$c=1; // or 0 (added after deceze's comment)
while($row = mysql_fetch_array($result)) {
  $c=1-$c; // magic!

  echo "
    <tr class=\"myclass_row_$c\">
      <td class=\"col1\">".$row['first_name']." ".$row['last_name']."</td>
      <td class=\"col2\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
    </tr>
  ";
}

或使用内联样式：

$colors = array('#ffffff','#f3f3f3');
$c=1;
while($row = mysql_fetch_array($result)) {
  $c=1-$c;

  echo "
    <tr style=\"background-color:{$colors[$c]};\">
       <!-- tds here -->
    </tr>
  ";
}

或使用预设类：

$styles = array('odd','even');
$c=1;
while($row = mysql_fetch_array($result)) {
  $c=1-$c;

  echo "
    <tr class=\"{$styles[$c]}\">
       <!-- ... -->
    </tr>
  ";
}

答案 2 :(得分：3)

已经有很多解决方案，但是这个只使用两行css。

您可以在偶数行和奇数行上设置特定的CSS：

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

答案 3 :(得分：2)

通常，我会在循环中每次声明一个index（int）值和增量。然后检查索引mod 2是否为1.如果是，则输出一个tr，其中包含要应用的样式以显示交替行。

$color = 0;
while($row = mysql_fetch_array($result)) {

  if($color % 2 == 1){
    echo "<tr>";
  }else{
    echo "<tr class=\"altRow\">";
  }
  echo "
  <td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
  <td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999;  padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
  </tr>
  ";
  $color++;
}

答案 4 :(得分：2)

因为它已经被撞了，这是我的5美分。

7个答案，而不是一个使用模板的答案 我们可以写出千篇文章的必要性，但这样的例子总会赢。

所以，基于OP的代码和stagas的回答：

业务逻辑部分：

$c      = 1;
$DATA   = array();
$sql    = "SELECT * FROM employee ORDER BY employee_id DESC";
$result = mysql_query($sql) or trigger_error(mysql_error().$sql);
while($row = mysql_fetch_array($result)) {
  $row['c'] = $c=1-$c;
  $DATA[] = $row;
}

和模板部分：

<tr class="myclass_row_<?=$row['$c']?>">
  <td class="col1"><?=$row['first_name']?> <?=$row['last_name']?></td>
  <td class="col2">
    <input type="button" name="edit" value="Edit" class="selbtn">&nbsp;<input type="button" name="delete" value="Delete" class="selbtn">
  </td>
</tr>

答案 5 :(得分：1)

$color = 1;
while($row = mysql_fetch_array($result)) {

if($color == 1){ 
  echo "
  <tr>
  <td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
  <td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999;  padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
  </tr>
  ";
$color = 2;
}
else
{
  echo "
  <tr>
  <td style=\"padding-left: 20px; border-bottom: 1px solid #555; border-right: 1px solid #555;\">".$row['first_name']." ".$row['last_name']."</td>
  <td style=\"text-align: center; border-bottom: 1px solid #555; border-right: 1px solid #555;  padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
  </tr>
  ";
  }
$color = 1;
}

答案 6 :(得分：1)

// here it is in less code

<?php
 $dbc = mysql_connect('localhost','root','') or die (mysql_error());
  mysql_select_db('payroll') or die (mysql_error());
 $sql = "SELECT * FROM employee ORDER BY employee_id DESC";

  $result = mysql_query($sql);
  $colors = array('FFF', '000000'); // valid hex colors
  $numOfColors = sizeOf($colors); $i = 0

  while($row = mysql_fetch_array($result)) {
  $i++;if($i>$numOfColors){$i=0;}
?>

  <tr>
  <td style="padding-left: 20px; border-bottom: 1px solid #<?=$colors[$i]?>; border-right: 1px solid #<?=$colors[$i]?>;"> <?=$row['first_name']?> <?=$row['last_name']?> </td>
  <td style="text-align: center; border-bottom: 1px solid #<?=$colors[$i]?>; border-right: 1px solid #<?=$colors[$i]?>;  padding-top: 2px ; padding-bottom: 3px ;"><input type="button" name="edit" value="Edit" class="selbtn">&nbsp;<input type="button" name="delete" value="Delete" class="selbtn"></td>
  </tr>

<?php

  }
?>

答案 7 :(得分：1)

只需跟踪它是否是带布尔值的交替行。在循环之前将其初始化为false，而不是每次迭代，然后您可以根据其值设置行样式。类似的东西：

...

$isAlternatingRow = false;

while($row = mysql_fetch_array($result)) {

    echo "
       <tr class=\"" . $isAlternatingRow ? "defaultRow" : "alternatingRow" . "\">
       <td style=\"padding-left: 20px; border-bottom: 1px solid #999; border-right: 1px solid #999;\">".$row['first_name']." ".$row['last_name']."</td>
       <td style=\"text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999;  padding-top: 2px ; padding-bottom: 3px ;\"><input type=\"button\" name=\"edit\" value=\"Edit\" class=\"selbtn\">&nbsp;<input type=\"button\" name=\"delete\" value=\"Delete\" class=\"selbtn\"></td>
       </tr>
       ";

    $isAlternatingRow = !($isAlternatingRow);
}

然后只定义tr.defaultRow td和tr.alternatingRow td的样式。

答案 8 :(得分：1)

$class="even"
while($row = mysql_fetch_array($result)) 
{
  if($class == "even")
  {
    echo "<tr class='$class'>";
    $class="odd"
  }
  else
  {
    echo "<tr class='$class'>";
    $class="even";
  }

  ...

}

答案 9 :(得分：0)

我是这样做的：

请记住添加一个名为“even”的CSS类，当然还有样式。

<?php
include 'connect.php';
echo "<table id='hor-zebra'>";
$i = 0;
while($row = mysql_fetch_array($result))
{
   if($i % 2 == 0)
   {
      echo "<tr class='even'>";
      echo "<td>" . $row['something'] . "</td>";
      echo "</tr>";
   }

   else
   {
      echo "<tr>";
      echo "<td>" . $row['something'] . "</td>";
      echo "</tr>";
   }
   $i++;
}
echo "</table>";

mysql_close($con);
?>

答案 10 :(得分：0)

在循环外使用预定义颜色。 

$rowCount = 0;
$color = array('#ffffff','#f3f3f3');
while($row = mysql_fetch_array($result)){
    $i = ($rowCount % 2); 
    echo "<element bgcolor='".$color["$i"]."'></element>";
    $rowCount++;
}
相关问题
最新问题