Как я могу генерировать разные цветовые линии для каждой строки, добавленной в таблицу, созданную из SQL?

Question

Как это код генерирует каждую строку того же цвета, как я могу сделать ее так, чтобы она добавила немного темнее оттенок каждой линии?

т.е .: белого бежевого белого бежевого белого бежевого

Так что он становится более удобным для чтения формата.

код ниже:

if(mysql_num_rows($result) > 0){ 
    while($row = mysql_fetch_array($result)){ 
     $invoiceitemssql = mysql_query('SELECT * FROM tblinvoiceitems WHERE invoiceid = '.$row['id'].' LIMIT 0,1'); 
     $invoiceitems = mysql_fetch_array($invoiceitemssql); 
     $html .= '<tr> 
      <td><a href="invoices.php?action=edit&id='.$row['id'].'">'.$row['id'].'</a></td> 
      <td>'.$row['firstname'].'</td> 
      <td>'.$row['lastname'].'</td> 
      <td>'.$row['companyname'].'</td> 
      <td>'.$row['city'].'</td> 
      <td>'.$row['phonenumber'].'</td> 
      <td>'.$row['date'].'</td> 
      <td>'.$row['duedate'].'</td> 
      <td>'.$row['total'].'</td> 
      <td>'.$invoiceitems['description'].'</td> 
     </tr>'; 
    } 
} 

Answer 1

Подобно

$i = 0; 

if(mysql_num_rows($result) > 0){ 
    while($row = mysql_fetch_array($result)){ 

    if ($i % 2 == 0) { 
     color white 
    } else { 
     color beige 
    } 

    $i++; 
    } 
} 

Answer 2

Вы можете использовать CSS

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

Answer 3

Используйте счетчик, чтобы переключить цвет фона:

$i=0; 
while($row = mysql_fetch_array($result)){ 
    if($i%2 == 0) 
     $bgcolor='beige'; // change the color code as needed 
    else 
     $bgcolor='white'; 
    $i++; 
    ...... 
    $html .= '<tr style="background:#'.$bcolor.'"> 

Answer 4

вы можете использовать CSS nth-child selector для этого, это делает так, что вам не нужно делать грязные петли php, чтобы добавить раскраску.

HTML

<table> 
    <tr> 
    <td></td><td></td> 
    </tr> 
    <tr> 
    <td></td><td></td> 
    </tr> 
    <tr> 
    <td></td><td></td> 
    </tr> 
</table> 

CSS

table tr:nth-child(odd) { 
    background:#F00; 
} 
table tr:nth-child(even) { 
    background:#FF0; 
} 

JSFiddle Demo

Answer 5

Вы можете использовать CSS, чтобы стиль каждого разные строки ..

, например:

tr:nth-child(odd) 
{ 
    background:#fff; 
} 
tr:nth-child(even) 
{ 
    background:#ddd; 
}