用jQuery实现ASP.NET GridView折叠伸展效果

今天做静态页面时有一个需求，就是页面上有一组两个选项的单选按钮和一个有6行的列表（该列表用Table标签实现，不是DIV），当选择单选按钮的选项一时，列表的前三条信息显示后三条信息隐藏，当选择单选按钮的选项二时，列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉，如何实现呢？实现后该实现还能应用到哪些场景？

1、第一反应的解决方案

碰到这个需求后，我第一反应就是很简单啊，分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来，然后通过JS控制DIV的显示。

第一步：使用DIV包裹需要隐藏显示的TR。代码如下：

<table> 
<div id="divName"> 
<tr> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</div> 
<div id="divSex"> 
<tr> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</div> 
</table> 

第二步：使用JS控制DIV的显示，来达到控制隐藏或显示行的效果：

$("#divName").style.display = "none";  
$("#divSex").style.display = "block"; 

第三步：运行程序，你会发现根本不管用，哈哈，有点被耍的感觉~！因为TR标签只能与TABLE标签搭配使用！好啦，虽然上面的代码不管用！但是还算起到了一个引导的作用吧，失败是成功的老娘嘛！

2、同事推荐的使用panel解决方案

这是在我描述了DIV与TR不能配合使用后，被同事笑话啦，哎、看来以后要多多学习学习HTML啦，笑话完我后，同事董宁告诉我用PANEL控件包住TR，用Visible属性在服务器级别控制TR的输出。

第一步：使用PANEL控件包住用来显示或隐藏的TR标签，代码如下：

<table> 
<asp:Panel ID="plName" runat="server"> 
<tr> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</asp:Panel> 
<asp:Panel ID="plSex" runat="server" > 
<tr> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></asp:Panel></td> 
</tr> 
</asp:Panel> 
</table> 

第二步：在服务器端使用Panel控件的Visible属性控制行的输出，代码如下：

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)  
{  
    string val = RadioButtonList1.SelectedValue;  
    switch (val)  
    {  
        case "Name":  
            plName.Visible = true;  
            plSex.Visible = false;  
            break;  
        case "Sex":  
            plName.Visible = false;  
            plSex.Visible = true;  
            break;  
        default:  
            plName.Visible = true;  
            plSex.Visible = true;  
            break;  
    }  
}   

这