先给看张效果这是没有点击的时候 < $(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技术群,相互交流!!!