各位求救?我做了点击li的内容下拉出div可是现在我想把li改为<tr>怎么改啊？

Question

原代码是:
<ul>
<li><a href="#" class="aabb"></a>
<div>点击li这行会下拉出div这一行内容，在点击一下就收回</div>
</li>
</ul>
javascript代码是:
<script type="text/javascript">       
$(function(){
$(".aabb").click(function(){
$(this).parents("li").each(function(){
$(this).toggleClass("toggle").children("div").toggle();
})
})
})
</script>我现在想把li改成<table><tr><td></td></tr><td></td><td></td><td></td></table>
效果就是:点击tr这一行时下拉出一行<div>怎么改啊?可不可以实现？求各位帮忙？

Answer 1

div嵌套在tr里面吗？。。把你构思的HTML代码写下

Answer 2

<table>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table>
我想要的效果就是点击tr一行就出现下拉框，下拉框不一定是div，也可以是别的，我也感觉div放不上，
各位能不能想想应该怎么做这块？
先谢谢各位

Answer 3

给table加上样式，如:aabb$(function(){
$("table.aabb tr").click(function(){
$(this).toggleClass("toggle").children("td").toggle();
})
})

Answer 4

谢谢您ywtywt337
我加了，可是效果不对，当我点击<tr>时这一行就隐藏了！
我要的效果不是这样的，是点击一行弹出一行内容，在点击这一行，弹出的内容又隐藏了

Answer 5

我做了一个，
<table>
<tr><td></td><td></td><td></td><td></td>   <th>点击tr这一行下拉出th在点击tr行就隐藏了，</th></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table>
<script type="text/javascript">   
$(function(){
$("table.aabb tr").click(function(){    
$(this).toggleClass("toggle").children("td").toggle();
})
})
</script>
我这样写点击tr会在右边行内出现th内容，在点击就隐藏了，可是在行的右边不对啊，能不能点击tr时th在单独一行显示出来，

Answer 6

各位我不用table了，改成ul li 了，但是效果出不来，各位帮我看一下这是什么问题？
<ul>          
<li style="width:40px;height:25px;">选择</li>
<li  style="width:70px;  height:25px;">编号</li>
<li  style="width:80px;   height:25px;">用户名</li>
<li  style="width:80px;   height:25px;">密码</li>
<li  style="width:120px;   height:25px;">手机号码</li>
<li  style="width:170px;  height:25px;">邮箱</li>
<li  style="width:120px;  height:25px;">注册时间</li>
<li  style="width:60px;  height:25px;">订阅数量</li>
<li   style="width:40px;  height:25px;">状态</li>
<li   style="width:70px;  height:25px;">省区</li>
<li   style="width:170px; height:25px;" class="border-r"> 管理 </li>
</ul>
<ul>
<li style="width:40px;"><input name="checkbox" id="checkbox" type="checkbox" class="STYLE2" value="checkbox" /></li>
<li  style="width:70px;">001</li>
<li  style="width:80px;"><a href="#" class="aabb">慕容婷婷</a></li>
<li  style="width:80px;">123456</li>
<li  style="width:120px;"><a href="member.geren.html">13269694098</a></li>
<li  style="width:170px;">[email protected]</li>
<li  style="width:120px;">2012-01-02 23:11:18</li>
<li  style="width:60px;">10000</li>
<li   style="width:40px;">启用</li>
<li   style="width:70px;">北京</li>
<li   style="width:170px;" class="border-r">sdfsdf</li><div style="display:none; width:1100px; height:30px;">
dfsdfasdfsdfsdafsdf
</div> 
</li>
</ul><script type="text/javascript">       
$(function(){
$(".aabb").click(function(){
$(this).parents("ui").each(function(){
$(this).toggleClass("toggle").children("div").toggle();
})
})
})
</script>