สร้าง ซ่อน แสดงแถวใน ตาราง ด้วย jQuery อย่างง่าย

22 June 2012 By Ninenik Narkdee

ซ่อน แสดง jquery

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

สามารถนำไปประยุกต์ใช้ ในการซ่อนเนื้อหา ในตาราง และจะแสดง

เมื่อคลิกที่หัวข้อรายการนั้นๆ ดูตัวอย่าง พร้อมโค้ดด้านล่างประกอบ

ตัวอย่าง

#	Topic
1	หัวข้อรายการที่ 1
ข้อความที่ถูกซ่อน 1
2	หัวข้อรายการที่ 2
ข้อความที่ถูกซ่อน 2
3	หัวข้อรายการที่ 3
ข้อความที่ถูกซ่อน 3
4	หัวข้อรายการที่ 4
ข้อความที่ถูกซ่อน 4
5	หัวข้อรายการที่ 5
ข้อความที่ถูกซ่อน 5

โค้ดตัวอย่างทั้งหมด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="2">
  <tr>
    <td width="50" align="center" bgcolor="#FF99CC">#</td>
    <td height="20" bgcolor="#FF99CC">Topic</td>
  </tr>

<?php
for($i=1;$i<=5;$i++){
?>  
  <tr bgcolor="#CCCC99" style="cursor:pointer;" onclick="$('#tr_toggle<?=$i?>').toggle();" >
    <td align="center" bgcolor="#EBEBD8"><?=$i?></td>
    <td height="20" bgcolor="#EBEBD8">หัวข้อรายการที่ <?=$i?></td>
  </tr>
  <tr style="display:none;" id="tr_toggle<?=$i?>">
    <td height="20" colspan="2" align="left" bgcolor="#F8F8EF">
    ข้อความที่ถูกซ่อน <?=$i?>
    </td>
  </tr>  
<?php } ?>  
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
</body>
</html>

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

Tags:: jquery ซ่อน แสดง

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