方法一: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>