while循环输出的表格

方法一：

<?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 οnmοuseοver="lrow(this)" οnmοuseοut="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>

 

转载于:https://www.cnblogs.com/f158w058/p/6554043.html