PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

29 November 2009 By
css cell jquery hilight ตาราง


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






Tags:: hilight cell css ตาราง jquery






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


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