php 隔行变色的实现代码

WBOY
发布: 2016-07-25 08:56:55
原创
1963 人浏览过
本文介绍下,用php实现隔行变色的一段代码,有需要的朋友参考下。

在php编程中,最常见的一个实现就是动态输出数据,尤其是输出以表格显示的数据。 数据来源可以是xml文件,可以是数据库表中的数据,也可以是其它类型的数据,如csv、xls等。

如何以用户友好的方式显示这些数据,有时是个问题。 以隔行变色的方式显示数量较大的数据时,不失为一个好办法,结合css样式来实现。可以让数据更清晰易读,更直观。

下面分享的这段代码,可以实现如上的功能,如下:

<?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>
登录后复制

说明: 本例中,我们用到了css3样式表,现在很多浏览器已经支持css3了。 大家可以尝试使用下,功能很强大,效果也不错。

如下:

tr:nth-child(odd) {
 background-color: red;
}
tr:nth-child(even) {
 background-color: green;
}
登录后复制


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板