jquery 实现 表格动态显示与隐藏

先给看张效果这是没有点击的时候 第二张就点击后会展开。这样给用户的体验就非常棒了。 主要实现的功能其实非常简单。 < $(document).ready( function()   ".first").click(                   //先找到这个需要点击的TR，的单击事件，选择用类选择器的好处就是可以重复出现。当然你可以用其他的方法，只要找到这个TR就行了。 function   ()   //alert("s"); //$(this).next().toggle(); //IE8 本来直接用这句就可以完成的，可是在jquery1.3.2里有个Bug，IE8并不买他的帐，所以只好用下面的两句来代替他来实现。 var   tr=$(this).next();    'display') == 'none'); //IE8  toggle是可以显示跟隐藏的。 jquery里还有其他的，比如hide,show. } ); } ); </ 这是主要实现效果的代码，当然得先引入jquery.js(点击可以下载最新版的1.3.2) 下面就是表格的代码： <   <tr class="TRtitle">   <td>   <span></span>   </td>   <td>   <span></span>   </td>     </tr>   <tr class="first" title=""> //注意了：上面jquery里面调用的就是这个class名   <td>   <input id="cbxSelect" type="checkbox" name="cbxSelect" value="<%# DataBinder.Eval(Container.DataItem,"cMessageID") %>"/>   </td>   <td >   <span><a><%# DataBinder.Eval(Container.DataItem, "cMTitle")%></a></span>   </td>   <td>   <span><%# DataBinder.Eval(Container.DataItem, "cSendDate")%></span>   </td>   </tr>     <tr style="display:none"> //这里就是咱们要隐藏 与显示的效果，初始先设为隐藏。   <td colspan="5" style="background-color:#FFFCE9">   <p ></p><p style="color:#777777; margin-left:35px;"><%# DataBinder.Eval(Container.DataItem, "cMContext")%></p>   </td>   </tr> </ 说真的，一开始，我在网上也找了很多，感觉比较复杂。 后来经过群友的帮助，才晓得原来并不是很难。看来JQUERY的功能确实很强大。 table>   table style="width:100%" class="memberTable">script> tr.toggle(tr.css( { { $( script language ="javascript" type ="text/javascript">

 

下面是演示效果：

----------------------

<script type="text/javascript"> </script>

发件箱

---

选择	标题	时间	发送到	操作
"/>
内容：

----------------------

欢迎大家加入76512040和88465849技术群，相互交流!!!