jQuery实现table表格信息的展开和缩小功能示例
2018-09-22 01:03
本文实例讲述了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>
运行效果如下
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。