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

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

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

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

ก่อนอื่นกำหนด 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 บาท หรือ ระบุจำนวน

Privacy Policy
Author Ninenik Narkdee
2023 © Copyright ninenik.com. All rights reserved.

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