การสลับสีแถวในตารางด้วย javascript

25 September 2008 เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee

javascript แถวในตาราง สลับสี

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ javascript แถวในตาราง สลับสี

ดูแล้ว 21,978 ครั้ง

ก่อนอื่นกำหนด stylesheet ดูโค๊ตด้านล่าง

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

จากนั้นกำหนด id ให้กำ แท็ก <table> ในตาราง ตามโค๊ตบรรทัดที่ 1 id="mytable"

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

แล้วใส่ Javascript ในส่วนแท็ก <head>

<script language="javascript">
  window.onload = function () {    
        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>

Output

Name	Age	Sex
Mike	15	male
Linda	20	female
Joe	14	male
Greg	32	male