|
本文介绍下，用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;
}로그인 후 복사 |
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
