PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

22 June 2012 By
jquery ซ่อน แสดง


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

เมื่อคลิกที่หัวข้อรายการนั้นๆ ดูตัวอย่าง พร้อมโค้ดด้านล่างประกอบ 
 
ตัวอย่าง
 
# Topic
1 หัวข้อรายการที่ 1
2 หัวข้อรายการที่ 2
3 หัวข้อรายการที่ 3
4 หัวข้อรายการที่ 4
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>
 
 






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






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


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