jQuery 表格特效：控制单元格折叠、展开代码

发布时间：2018-08-15 23:42 所属栏目：121 来源：站长网

导读：jQuery 控制表格的某行可以折叠展开，相信大家见到过这种功能，鼠标点击某单元格后，会看到单元格不见了，实际上是折叠(合拢)了，由于时间关系，作者并未进行美化，看上去粗糙一些，需要使用的朋友自己使用CSS美化一下吧。为解决一些网页特效运行后不能显

　　jQuery 控制表格的某行可以折叠展开，相信大家见到过这种功能，鼠标点击某单元格后，会看到单元格不见了，实际上是折叠(合拢)了，由于时间关系，作者并未进行美化，看上去粗糙一些，需要使用的朋友自己使用CSS美化一下吧。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!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> <title>jQuery table</title> <script src="/uploads/common/js/jquery-1.3.2.js"></script> <script> $(function() { $('tr.parent') .css("cursor","pointer") .attr("title","点击这里展开/关闭") .click(function(){ $(this).siblings('.child-'+this.id).toggle(); }); // 默认展开 //$('tr[@class^=child-]').hide().children('td'); }); </script> <style> table.detail, table.detail td, table.detail th { border:1px solid #000 ; } </style> </head> <body> <table id="detail_table" class="detail" > <col style="width:40px;"> <col style="width:80px;"> <col style="width:150px;"> <col style="width:40px;"> <thead> <tr> <th>ID</th> <th colspan="2">Name</th> <th>Total</th> </tr> </thead> <tbody> <tr class="parent" id="row123"> <td>123</td> <td colspan="2">关闭1</td> <td>100</td> </tr> <tr class="child-row123"> <td> </td> <td>2007-01-02</td> <td>A short description</td> <td>15</td> </tr> <tr class="child-row123"> <td> </td> <td>2007-02-03</td> <td>Another description</td> <td>45</td> </tr> <tr class="child-row123"> <td> </td> <td>2007-03-04</td> <td>More Stuff</td> <td>40</td> </tr> <tr class="parent" id="row456"> <td>456</td> <td colspan="2">关闭2</td> <td>50</td> </tr> <tr class="child-row456"> <td> </td> <td>2007-01-02</td> <td>A short description</td> <td>10</td> </tr> <tr class="child-row456"> <td> </td> <td>2007-02-03</td> <td>Another description</td> <td>20</td> </tr> <tr class="child-row456"> <td> </td> <td>2007-03-04</td> <td>More Stuff</td> <td>20</td> </tr> <tr class="parent" id="row789"> <td>789</td> <td colspan="2">关闭3</td> <td>75</td> </tr> <tr class="child-row789"> <td> </td> <td>2007-01-02</td> <td>A short description</td> <td>33</td> </tr> <tr class="child-row789"> <td> </td> <td>2007-02-03</td> <td>Another description</td> <td>22</td> </tr> <tr class="child-row789"> <td> </td> <td>2007-03-04</td> <td>More Stuff</td> <td>20</td> </tr> </tbody> </table> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）