PHP alternando colores

  $ dbc = mysql_connect ('localhost', 'root', '') o morir (mysql_error ()); mysql_select_db ('nómina') o morir (mysql_error ()); $ sql = "SELECCIONAR * DE PEDIDO DE empleado POR ID_empleado DESC"; $ resultado = mysql_query ($ sql); while ($ fila = mysql_fetch_array ($ resultado)) {echo " ". $ fila ['primer_nombre']". ". $ fila ['apellido']".  ";}

Quería agregar un color alterno en el bucle. ¿Qué código debo agregar?

preguntado el 30 de mayo de 10 a las 22:05

11 Respuestas

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

Respondido el 06 de junio de 10 a las 06:06

Ejecutar una instrucción if-then-else es mejor que definir un montón de variables y luego ejecutar un if-then-else de todos modos. Y definitivamente no queremos redefinir esos colores para cada fila del resultado. - animuson ♦

Asi es como debería de hacerse. sin embargo, como mencionó animuson, sugeriría poner las definiciones de color antes del ciclo while. - jayrox

Utilice clases CSS en lugar de estilos en línea. Son más fáciles de manipular. Luego estiliza el .myclass_row_0 y .myclass_row_1 en su CSS para el color de fila alternativo, así como .col1 y .col2 para los estilos de columna.

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

O usando estilos en línea:

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

O usando clases preestablecidas:

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

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

Respondido el 06 de junio de 10 a las 10:06

LOL, magia muy creativa, aunque al menos declararía $c = 0 antes de que comience el ciclo. :) - deceze ♦

Aunque la respuesta no utiliza plantillas, al igual que el resto, se puede transformar fácilmente para usar una plantilla. - Tu sentido común

Ya hay muchas soluciones, pero esta usa solo dos líneas de css.

Puede establecer CSS específico en filas pares e impares:

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

Respondido 14 Abr '15, 14:04

+1 El único cambio que haría es apuntar a la td elementos en lugar de los tr elementos (es decir. tr:nth-child(even) td) y usaría background-color en lugar de. Sin embargo, asumiendo que no necesita ser compatible con IE8, esta es la solución más simple. - david f

Éste tiene mi voto. Muy fácil de implementar y funciona de forma completamente independiente de cualquier implementación del lado del servidor. ¡Me sorprende que haya tantas otras sugerencias! - ben hillier

Votado también. Esta es la solución más elegante, porque no requiere PHP innecesario y si alguna vez cambia de opinión (como si cada tercera fila también tuviera otro color), es muy fácil de ajustar con un mínimo de CSS. - Virginia

Por lo general, declararé un valor de índice (int) y lo incrementaré cada vez que pase por el ciclo. Luego, verifique si index mod 2 = 1. Si es así, genere un tr con el estilo que desea aplicar para mostrar una fila alterna.

$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++;
}

contestado el 31 de mayo de 10 a las 03:05

Definir una clase en la fila de la tabla no es una forma muy eficiente de hacerlo. La mayoría de los navegadores tienen representaciones muy diferentes para las propiedades CSS en la fila de la tabla. De lo contrario, esta es una excelente manera de hacerlo. PD $color++ se ve mucho mejor que $color = $color + 1! - animuson ♦

De acuerdo, simplemente no podía recordar si PHP tenía un operando ++ (estado en la tierra de .NET por un tiempo). En cuanto al estilo, también estoy de acuerdo, IE es un problema con el estilo de las filas. Solo quería elaborar un ejemplo de cómo usar la operación de modificación. - Tommy

Como ya está golpeado, aquí están mis 5 centavos.

7 respuestas y ni una sola usando plantillas.
Podemos escribir mil artículos de la necesidad de plantillas, pero tales ejemplos siempre ganarán.

Entonces, según el código del OP y la respuesta de stagas:

parte de la lógica empresarial:

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

y parte de la plantilla:

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

Respondido el 06 de junio de 10 a las 06:06

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

contestado el 31 de mayo de 10 a las 02:05

Una vez que el color se establece en 2, nunca vuelve a ser uno. Los estilos alternos no se mostrarían después del primero. - Tommy

Dulce, creo que podría gustarme más tu método, parece que sería un poquito más rápido hacer una comparación directa que una operación de módulo y suma. ¿Quizás otra pregunta SO? :) - Tommy

Esto desperdicia una gran cantidad de caracteres adicionales que de otro modo no tendrían que usarse. - animuson ♦

// 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

  }
?>

contestado el 31 de mayo de 10 a las 03:05

Simplemente controle si es una fila alterna con un booleano. Inicializarlo en false antes de su bucle, no para cada iteración, entonces puede establecer el estilo de fila en función de su valor. Algo como:

...

$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);
}

Luego, simplemente defina estilos para tr.defaultRow td y tr.alternatingRow td.

contestado el 31 de mayo de 10 a las 03:05

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

  ...

}

contestado el 31 de mayo de 10 a las 03:05

Ya hay una respuesta más o menos exactamente como esta a continuación. - animuson ♦

Lo hice así:

Recuerde agregar una clase CSS llamada "incluso", con estilo, por supuesto.

<?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);
?>

contestado el 25 de mayo de 11 a las 17:05

Usando un color predefinido fuera del bucle.

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

Respondido 20 Abr '16, 07:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.