方法一:
<?php
echo '<table border="1" width="800" align="center">';
echo '<caption><h1>使用一个while循环输出的表格</h1></caption>';
$i=0;
while($i<1000){
if($i%10==0){ //行数。
if($i%20==0){ //单双行颜色
$bg="#ffffff";
}else{
$bg="#cccccc";
}
echo '<tr onmouseover="lrow(this)" onmouseout="drow(this)" bgColor="'.$bg.'">'; //鼠标移入变色。
}
echo '<td>'.$i.'</td>'; //表格写入值。
$i++; //执行条件增变。
if($i%10==0){
echo '</tr>';
}
}
echo '</table>';
?>
<script>
var ys=null;
function lrow(obj){
ys=obj.bgColor;
obj.bgColor='red';
}
function drow(obj){
obj.bgColor=ys;
}
</script>
方法二:
<?php
echo "<table border='1' width='800' align='center'>";
echo '<caption><h1>while循环输出表格</h1></caption>';
$i = 0;
while ($i < 1000) {
if ($i%10 == 0) {
if ($i%20 == 0) {
$bg = "over2";
}else{
$bg = 'over1';
}
echo "<tr class=$bg >";
}
echo "<td>".$i."</td>";
$i++;
if ($i%10 == 0) {
echo '</tr>';
}
}
echo "</table>";
?>
<style type="text/css">
.over1{
background-color: #fff;
}
.over1{
background-color: #ccc;
}
</style>
<script src="//cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
<script>
$(document).ready(function(){
$("tr").bind({
mouseover:function(){$(this).css("background-color","red");},
mouseout:function(){$(this).css("background-color","");}
});
});
</script>