กำหนด hilight ของ cell ข้อมูลในตาราง ด้วย jQuery และ CSS อย่างง่าย

1.กำหนด id ให้กับตาราง ในที่นี่กำหนดเป็น id=myTable

<table  id="myTable" width="500" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">

2.แทรก tag col ให้เท่ากับจำนวนคอลัมน์ทั้งหมดที่มีในตาราม ในที่นี่่มี 5 คอลัมน์

<table  id="myTable" width="500" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
<col />
<col />
<col />
<col />
<col />

3.กำหนดส่วนที่เป็นหัวข้อของแต่ละคอลัมน์ด้วย tag thead

<thead>
  <tr>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
  </tr>
</thead>

4.กำหนดส่วนที่เป็นข้อมูลไว้ใน tag tbody

<tbody>
  <tr>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
    <td align="center">4</td>
    <td align="center">5</td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td align="center">7</td>
    <td align="center">8</td>
    <td align="center">9</td>
    <td align="center">10</td>
  </tr>
  <tr>
    <td align="center">11</td>
    <td align="center">12</td>
    <td align="center">13</td>
    <td align="center">14</td>
    <td align="center">15</td>
  </tr>
  <tr>
    <td align="center">16</td>
    <td align="center">17</td>
    <td align="center">18</td>
    <td align="center">19</td>
    <td align="center">20</td>
  </tr>
  <tr>
    <td align="center">21</td>
    <td align="center">22</td>
    <td align="center">23</td>
    <td align="center">24</td>
    <td align="center">25</td>
  </tr>
</tbody> 

5.ปิดตารางด้วย </table>
6.ผลลัพธ์ตารางตัวอย่างสำหรับทดสอบ

<table  id="myTable" width="500" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
<col />
<col />
<col />
<col />
<col />
<thead>
  <tr>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
    <td align="center">หัวข้อ</td>
  </tr>
</thead>
 <tbody>
  <tr>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
    <td align="center">4</td>
    <td align="center">5</td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td align="center">7</td>
    <td align="center">8</td>
    <td align="center">9</td>
    <td align="center">10</td>
  </tr>
  <tr>
    <td align="center">11</td>
    <td align="center">12</td>
    <td align="center">13</td>
    <td align="center">14</td>
    <td align="center">15</td>
  </tr>
  <tr>
    <td align="center">16</td>
    <td align="center">17</td>
    <td align="center">18</td>
    <td align="center">19</td>
    <td align="center">20</td>
  </tr>
  <tr>
    <td align="center">21</td>
    <td align="center">22</td>
    <td align="center">23</td>
    <td align="center">24</td>
    <td align="center">25</td>
  </tr>
</tbody>     
</table>

7. CSS Code

<style type="text/css">
/* css สำหรับกำหนด hilight แถวและคอลัมน์ของ cell ที่เลื่อนเมาส์มาอยู่เหนือ */
.hilight_group{
	background-color:#EAEAEA;
}
/* css สำหรับกำหนด hilight ของ cell ที่เลื่อนเมาส์มาอยู่เหนือ */
.hilight{
	color:#FFFFFF;
	background-color:#FF6633;
}
/* css สำหรับส่วนของ หัวข้อคอลัมน์ ของตาราง Table ที่มี id เท่ากับ myTable */
table#myTable thead tr td{
	background-color:#E9E9E9;
	color:#000000;
	font-size:12px;
}
</style>

8. jQuery Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function(){
	var tableID="table#myTable"; // กำหนด id ของตาราง
	var numCol=$(tableID+" col").length; // หาจำนวนคอลัมน์ทั้งหมด
	$(tableID+" tbody tr td").hover(function(){
		var nowTD=$(tableID+" tbody tr td").index(this); // หา index ของ cell ในตาราง
		var nowCol=(nowTD<numCol)?nowTD:nowTD%numCol; // คำนวณหาตำแหน่งของ คอลัมน์
		$(this).addClass("hilight").parent().addClass("hilight_group"); // กำหนด class ให้ cell และ แถวของ cell
		$(tableID+" col").eq(nowCol).addClass("hilight_group"); // กำหนด class ให้กับ คอลัมน์	
	},function(){
		var nowTD=$(tableID+" tbody tr td").index(this); // หา index ของ cell ในตาราง
		var nowCol=(nowTD<numCol)?nowTD:nowTD%numCol; // คำนวณหาตำแหน่งของ คอลัมน์
		$(this).removeClass("hilight").parent().removeClass("hilight_group"); // เอา class ของ cell และ แถวของ cell ออก
		$(tableID+" col").eq(nowCol).removeClass("hilight_group"); // เอา class ของ คอลัมน์ ออก
	});
});
</script>

ตัวอย่าง

หัวข้อ	หัวข้อ	หัวข้อ	หัวข้อ	หัวข้อ
1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20
21	22	23	24	25