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

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

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

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

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

ก่อนอื่นกำหนด 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

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

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

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน

Terms of Service | Privacy Policy

Author Ninenik Narkdee
2025 © Copyright ninenik.com. All rights reserved.

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ