本文介绍下,用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; } |