jquery伸缩表格单击每个单元格最后一行实现伸缩资源-CSDN文库

共2个文件

js：1个

html：1个

jquery

伸缩表格

table

单击展开

4星 · 超过85%的资源需积分: 9 32 浏览量 2010-04-27 02:21:32 上传评论收藏 34KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery_table.rar （2个子文件）

table.html 5KB

script

jquery-1.3.1.js 115KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <title>测试</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #sty_subject { border-collapse:collapse; width:550px; border:1px #D4D4D4 solid;} td { height:18px;padding-top:3px; border:1px #D4D4D4 solid; margin:0px; font-size:12px; text-align:center;} th { height:15px; padding:5px; background-color:#E9E9E9; color:#818181; border-top:8px #D5D5D5 solid;border-bottom:1px #D4D4D4 solid; border-left:1px #D4D4D4 solid; border-right:1px #D4D4D4 solid;margin:0px;} .trover { background-color:#CCC;} .twotxt { width:50px; text-align:center;} .fourtxe { width:100px;} dl { display:block; margin:2px 0px 0px 0px;} dt { float:left; display:block; margin:0px;} dd { display:block; margin-left:55px; margin-top:4px; padding:0px;} ol { margin:0px;display:block; padding:0px;} ol li{ margin:0px 0px 0px 20px;; padding:0px;} .maintxt {text-align:left; padding:10px;} .showtxt {border-top:1px #D5D5D5 solid;border-bottom:1px #D4D4D4 solid;background:url(images/arrows.gif) no-repeat 70px -12px;border-left:1px #D4D4D4 solid; border-right:1px #D4D4D4 solid; cursor:pointer;} .bgup { background:url(images/arrows.gif) no-repeat 70px 6px;} .sub { margin-left:460px; width:80px; margin-top:10px;} </style> <script type="text/javascript" src="script/jquery-1.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sty_subject tr:odd").addClass("odd"); $("#sty_subject tr:not(.odd)").hide(); $("#sty_subject tr:first-child").show(); $("#sty_subject tr.odd td:last-child").click(function(){ $(this).toggleClass("bgup"); $(this).parent().next("tr").toggle(); }); }); </script> </head> <body> <form> <table id="sty_subject"> <th class="two">选题</th> <th class="two">编号</th> <th>题目</th> <th class="four">指导老师</th> <th class="two">职称</th> <th class="four">内容简介</th> <tr> <td class="two"><input type="radio" name="ch_class" /></td> <td class="two">D0101</td> <td>出租车计费系统</td> <td>张安华</td> <td class="two">讲师</td> <td class="showtxt">查看</td> </tr> <tr><td colspan="6" class="maintxt"> <dl> <dt>主要内容:</dt> <dd> 通过对不同情况下的出租车状态分析，对出租车的计费给予相应的控制，从而实现出租车的全面 </dd> </dl> <dl> <dt>基本要求:</dt> <dd> <ol> <li>掌握单片机的数据采集原理，以及相关编程；</li> <li>了解出租车计费的规则从而根据相关数据，给予相应处理并显示；</li> <li>掌握传感器在数据采集中的原理，从而可靠的提供数据；</li> </ol> </dd> </dl> <dl> <dt>参考文献:</dt> <dd> <ol> <li>许爱卿，孙涵芳。MCS-51/96系列单片机原理及应用[M].北京航空航天大学出版社，1992.</li> <li>范风强，兰婵丽。单片机语言C51应用实战集锦[M].北京：电子工业出版社，2002.</li> <li>赵亮，侯国锐。单片机C语言编程与实例[M].北京：人民邮电出版社，2004</li> <li>吴金戌，沈庆阳，郭庭吉。8051单片机时间与应用[M]。北京：清华大学出版社，2004.</li> </ol> </dd> </dl> </td></tr> <tr> <td class="two"><input type="radio" name="ch_class" /></td> <td class="two">D0101</td> <td>出租车计费系统</td> <td>张安华</td> <td class="two">讲师</td> <td class="showtxt">查看</td> </tr> <tr><td colspan="6" class="maintxt"> <dl> <dt>主要内容:</dt> <dd> 通过对不同情况下的出租车状态分析，对出租车的计费给予相应的控制，从而实现出租车的全面 </dd> </dl> <dl> <dt>基本要求:</dt> <dd> <ol> <li>掌握单片机的数据采集原理，以及相关编程；</li> <li>了解出租车计费的规则从而根据相关数据，给予相应处理并显示；</li> <li>掌握传感器在数据采集中的原理，从而可靠的提供数据；</li> </ol> </dd> </dl> <dl> <dt>参考文献:</dt> <dd> <ol> <li>许爱卿，孙涵芳。MCS-51/96系列单片机原理及应用[M].北京航空航天大学出版社，1992.</li> <li>范风强，兰婵丽。单片机语言C51应用实战集锦[M].北京：电子工业出版社，2002.</li> <li>赵亮，侯国锐。单片机C语言编程与实例[M].北京：人民邮电出版社，2004</li> <li>吴金戌，沈庆阳，郭庭吉。8051单片机时间与应用[M]。北京：清华大学出版社，2004.</li> </ol> </dd> </dl> </td></tr> </table> <input type="submit" name="submit" class="sub" value="确定" /> </form> </body> </html>

评论收藏

内容反馈