PHP interlaced color change implementation code-PHP Tutorial-php.cn

PHP interlaced color change implementation code

WBOY

Release： 2016-07-25 08:56:55

Original

1962 people have browsed it

This article introduces a piece of code that uses PHP to achieve interlaced color change. Friends in need can refer to it.

In PHP programming, one of the most common implementations is to dynamically output data, especially output data displayed in tables. The data source can be an xml file, data in a database table, or other types of data, such as csv, xls, etc.

How to display this data in a user-friendly way is sometimes a problem. When displaying a large amount of data with interlaced color changes, it is a good way to combine it with CSS styles. It can make the data clearer, easier to read and more intuitive.

The code shared below can achieve the above functions, as follows:

<?php

/*** an array of animals ***/
$animals = array('dingo',
        'wombat',
        'platypus',
        'kangaroo',
        'steve irwin',
        'wallaby',
        'kookaburra',
        'kiwi');
?>

<html>
<head>
<style type="text/css">

table tbody tr.light {
    background-color:pink;
}

table tbody tr.dark {
    background-color: grey;
}

table tbody tr:hover {
    background-color: white;
}
</style>
</head>

<body>
<table>
<thead>
<tr><td>隔行变色</td></tr>
</thead>
<tfoot>
<tr><td>bbs.it-home.org-程序员之家<td></tr>
</tfoot>
<tbody>
<?php
    /*** set a counter ***/
    $i=0;
    /*** the CSS class names ***/
    $colors = array('light', 'dark');
    foreach( $animals as $critter )
    {
        echo '<tr class="'.$colors[$i++ % 2].'"><td>'.$critter.'</td></tr>';
    }
?>
</tbody>
</table>

Copy after login

Instructions: In this example, we used the css3 style sheet, and many browsers now support css3. You can try to use it, it is very powerful and the effect is good.

As follows:

tr:nth-child(odd) {
 background-color: red;
}
tr:nth-child(even) {
 background-color: green;
}

Copy after login