jQuery实现table表格信息的展开和缩小功能示例

2018-09-22 01:03

阅读：612

　　本文实例讲述了jQuery实现table表格信息的展开和缩小功能。分享给大家供大家参考，具体如下：

　　 <%@ page language=javaimport=java.util.*pageEncoding=UTF-8%> <% String path = request.getContextPath(); String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/; %> <!DOCTYPE HTML PUBLIC -//W3C//DTDHTML 4.01 Transitional//EN> <html> <head> <base href=<%=basePath%> rel=external nofollow > <title>My JSP index4.jsp startingpage</title> <meta http-equiv=pragma content=no-cache> <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <meta http-equiv=keywords content=keyword1,keyword2,keyword3> <meta http-equiv=description content=This is my page> <link rel=stylesheet type=text/css href=css/index9.css rel=external nofollow > <script src=编号</td> <td>姓名</td> <td>成绩</td> </tr> <tr align=left class=parent id=row1><td colspan=3>学生信息</td></tr> <tr class=child_row1> <td>001</td> <td>小明</td> <td>80</td> </tr> <tr class=child_row1> <td>002</td> <td>张三</td> <td>79</td> </tr> </table> <script type=text/javascript> $(function() { $(tr.parent).click(function() { $(this).toggleClass(selected).siblings(.child_+this.id).toggle(); }); }); </script> </body> </html>

　　运行效果如下