jquery table展开 折叠效果

大大源码 • • 其他
  1. 今天要做一个table的展开 折叠效果，想起以前自己收藏了一个，寻无果，索性自己做一个
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7.     <title>无标题文档</title>
  9.     <script language="javascript" type="text/javascript" src="jquery.js"></script>
  11.     <script language="javascript" type="text/javascript">
  12.         function show_and_hide_tr(tb_id, obj) {
  13.             $("#" + tb_id).find("tr").each(function(i) {
  14.                 i > 0 ? (this.style.display == "none" ? this.style.display = "" : this.style.display = "none") : ($(this).next().css("display") == "none" ? (obj.value = "折叠") : (obj.value = "展开"));
  15.             });
  16.         }
  17.     </script>
  19. </head>
  20. <body>
  21.     <table id="tb1" style="width: 100%;" border="1">
  22.         <tr>
  23.             <th colspan="3">
  24.                 <input type="button" value="折叠" onclick="show_and_hide_tr('tb1',this);" />
  25.             </th>
  26.         </tr>
  27.         <tr>
  28.             <td>
  29.                  作者：ikmb QQ:154179812
  30.             </td>
  31.             <td>
  32.                  欢迎交流
  33.             </td>
  34.             <td>
  35.                  
  36.             </td>
  37.         </tr>
  38.         <tr>
  39.             <td>
  40.                  
  41.             </td>
  42.             <td>
  43.                  
  44.             </td>
  45.             <td>
  46.                  
  47.             </td>
  48.         </tr>
  49.     </table>
  50. </body>
  51. </html>
版权声明：本文为ikmb原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>