جدول راه راه تنها، نه خال خالیه راه راه

در نوشته قلبی (
Zebra Table / جدول
راه راه ) چگونگی ایجاد جدول با پس زمینه راه راه ، را مرور کردم. در این نوشته
هم با استفاده از CSS و جاوا امکان تغییر رنگی سطری که مکان
نما بر روی آن قرار دارد را نمایش می دهم.
بدون مقدمه به قطعه HTML زیر توجه کنید :

<style type="text/css">
<!–
    tr.outclr{
    }
    tr.inclr {
    background: #f0badd;
    }
–>
</style>
.
.
.
<table>
<tr class="outclr" onmouseover="this.className=’inclr
‘"onmouseout="this.className=’outclr’">
    <td>
        Hover Table !!!
    </td>
</tr>
</table>

توجه کنید رویدادهای
onmouseover و onmouseout می تواند برای سطر و یا ستون به کار رود. نحوه انتخاب
مکانی که از آن ها استفاده کنید به آرایش جدول شما بستگی دارد.
حال اگر این افکت را همراه با جدول راه راه در نظر بگیرد، و از یک
بانک اطلاعاتی استفاده کنید، چیزی شبیه به نمونه زیر را خواهید داشت :

echo "<table>";
while($row = mysql_fetch_array($sql)){
    $no = $num_results – $from;
    if (!isset($bgflag)) $bgflag = 0;
    if ($bgflag == 1) {
        echo "<tr class=\"outclr\"
onmouseover=\"this.className=’inclr’\" onmouseout=\"this.className=’outclr’\"
valign=\"top\" bgcolor=\"e3eef3\">";
        $bgflag = 2;
    } else {
        echo "<tr class=\"outclr\"
onmouseover=\"this.className=’inclr’\" onmouseout=\"this.className=’outclr’\"
valign=\"top\" bgcolor=\"b3e3f3\">";
        $bgflag = 1;
    }
    echo "<td align=\"center\">";
    echo "$no";
    echo "</td>";
    echo "<td>";
    echo "<a
href=\"http://".$row["link"]."\">".$row["link"]."</a>";
    echo "</td>\n";
    echo "</tr>";
}
echo "</table>";

امیدوارم تا به اینجا
بتوانید از این ترکیب استفاده کنید. سعی می کنم در ادامه این مطلب بک نمونه کامل را
نمایش دهم و فایل آماده را برای استفاده قرار دهم.
حتما روش های دیگری هم وجود دارد، لطفا اگر تجربه ای  داشته اید و یا روش
بهینه تری سراغ دارید مطرح کنید.