วันศุกร์ที่ 2 กันยายน พ.ศ. 2554

การสลับสีระหว่าง ROW Javascipt + สั่งตัวกระพริบ

<style type="text/css">
/* class สำหรับแถวส่วนหัวของตาราง */
.tr_head{
background-color:#333333;
color:#FFFFFF;
}
/* class สำหรับแถวแรกของรายละเอียด */
.tr_odd{
background-color:#F8F8F8;
}
/* class สำหรับแถวสองของรายละเอียด */
.tr_even{
background-color:#F2F2F2;
}
</style>

2.
<table id="mytable" width="50%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Sex</td>
  </tr>
    <tr>
    <td>Mike</td>
    <td>15</td>
    <td>male</td>
  </tr>
      <tr>
    <td>Linda</td>
    <td>20</td>
    <td>female</td>
  </tr>
      <tr>
    <td>Joe</td>
    <td>14</td>
    <td>male</td>
  </tr>
      <tr>
    <td>Greg</td>
    <td>32</td>
    <td>male</td>
  </tr>
</table>


<table id="mytable" width="50%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Sex</td>
  </tr>
    <tr>
    <td>Mike</td>
    <td>15</td>
    <td>male</td>
  </tr>
      <tr>
    <td>Linda</td>
    <td>20</td>
    <td>female</td>
  </tr>
      <tr>
    <td>Joe</td>
    <td>14</td>
    <td>male</td>
  </tr>
      <tr>
    <td>Greg</td>
    <td>32</td>
    <td>male</td>
  </tr>
</table>

3.
<script language="javascript">
  window.onload = function clr() {  
var a=document.getElementById('mytable'); // อ้างอิงตารางด้วยตัวแปร a
for(i=0;i<a.rows.length;i++){ // วน Loop นับจำนวนแถวในตาราง
if(i>0){  // ตรวจสอบถ้าไม่ใช่แถวหัวข้อ
if(i%2==1){   // ตรวจสอบถ้าไม่ใช่แถวรายละเอียด
a.rows[i].className="tr_odd";  // กำหนด class แถวแรก
}else{
a.rows[i].className="tr_even"; // กำหนด class แถวที่สอง
}
}else{ // ถ้าเป็นแถวหัวข้อกำหนด class
a.rows[i].className="tr_head";
}
}
 }
 </script>

<!-- เริ่ม Script ตัวกระพริบ  <blink> -->
 <script type="text/javascript">
  function blinkIt() {
  if (!document.all) return;
  else {
  for(i=0;i<document.all.tags('blink').length;i++){
  s=document.all.tags('blink')[i];
  s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible';
  }
  }
  }
/// กรณีที่มี มี Java ใน Window Onload แล้ว เรียก script 2 ตัวพร้อมกัน
<body onload="clr();setInterval('blinkIt()',1000)">
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)