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

29 November 2009 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

jquery css cell hilight ตาราง

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

ดูแล้ว 9,251 ครั้ง

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

1	`<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