while循環輸出的表格

方法一:php

<?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>

 

方法二:css

<?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>
相關文章
相關標籤/搜索