suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  php 隔行变色的实现代码

php 隔行变色的实现代码

WBOY
WBOYOriginal
2016-07-25 08:56:551958Durchsuche
本文介绍下，用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;
}


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：php 扑克牌代码的简单例子 Nächster Artikel：php 输出文字到图片上(文字水印)的代码

In Verbindung stehende Artikel

Mehr sehen