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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
css hilight ตาราง jquery cell

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



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


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











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











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