使用jQuery实现ASP.NETGridView折叠伸展效果
今天做静态页面时有一个需求，就是页面上有一组两个选项的单选按钮和一个有6行的列表（该列表用Table标签实现，不是DIV），当选择单选按钮的选项一时，列表的前三条信息显示后三条信息隐藏，当选择单选按钮的选项二时，列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉，如何实现呢？实现后该实现还能应用到哪些场景？
1、第一反应的解决方案
碰到这个需求后，我第一反应就是很简单啊，分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来，然后通过JS控制DIV的显示。
第一步：使用DIV包裹需要隐藏显示的TR。代码如下：
1. <table>
2. <div id="divName">
3. <tr>
4. <td>姓名：</td>
5. <td><input id="txtname" type="text" /></td>
6. </tr>
7. </div>
8. <div id="divSex">
9. <tr>
10. <td>年龄：</td>
11. <td><input id="txtsex" type="text" /></td>
12. </tr>
13. </div>
14. </table>
第二步：使用JS控制DIV的显示，来达到控制隐藏或显示行的效果：
1. $("#divName").style.display = "none";
2. $("#divSex").style.display = "block";
第三步：运行程序，你会发现根本不管用，哈哈，有点被耍的感觉~！因为TR标签只能与TABLE标签搭配使用！好啦，虽然上面的代码不管用！但是还算起到了一个引导的作用吧，失败是成功的老娘嘛！
2、同事推荐的使用panel解决方案
这是在我描述了DIV与TR不能配合使用后，被同事笑话啦，哎、看来以后要多多学习学习HTML啦，笑话完我后，同事董宁告诉我用PANEL控件包住TR，用Visible属性在服务器级别控制TR的输出。
第一步：使用PANEL控件包住用来显示或隐藏的TR标签，代码如下：
1. <table>
2. <asp:Panel ID="plName" runat="server">
3. <tr>
4. <td>姓名：</td>
5. <td><input id="txtname" type="text" /></td>
6. </tr>
7. </asp:Panel>
8. <asp:Panel ID="plSex" runat="server" >
9. <tr>
10. <td>年龄：</td>
11. <td><input id="txtsex" type="text" /></asp:Panel></td>
12. </tr>
13. </asp:Panel>
14. </table>
第二步：在服务器端使用Panel控件的Visible属性控制行的输出，代码如下：
1. protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
2. {
3. string val = RadioButtonList1.SelectedValue;
4. switch (val)
5. {
6. case "Name":
7. plName.Visible = true;
8. plSex.Visible = false;
9. break;
10. case "Sex":
11. plName.Visible = false;
12. plSex.Visible = true;
13. break;
14. default:
15. plName.Visible = true;
16. plSex.Visible = true;
17. break;
18. }
19. }
这种方法虽然没有问题，但是感觉还是太无厘头了吧？控制页面展示的代码也要让服务器端去做吗？太浪费性能了！而且页面控制的代码与逻辑交互代码放一起简直是混乱不堪啊，在否决掉这个办法时，我们的大侠歪歪同志登场了，说道歪歪同志我不得不佩服啊，身为项目经理的歪歪，写代码的功底竟然比程序员还猛，完全无需代码提示，纯手工敲击键盘加清晰思路完美解决该问题！
3、同事“歪歪”大侠的无厘头解决方案
那么，我们来看看歪歪的思路，首先给每个TR标签赋予一个class样式，但是这个样式是没有实现的，仅仅做获取该TR的标识。
第一步：给TR标签添加一个没有实现的class样式。代码如下：
1. <table id="MyList">
2. <tr class="NameCSS">
3. <td>姓名：</td>
4. <td><input id="txtname" type="text" /></td>
5. </tr>
6. <tr class="SexCss">
7. <td>年龄：</td>
8. <td><input id="txtsex" type="text" /></td>
9. </tr>
10. </table>
第二步：使用Jquery根据class获取TR元素，并且控制其隐藏或显示，代码如下：
1. var $rowsName = $("#MyList").find(".NameCSS");
2. var $rowsSex = $("#MyList").find(".SexCss");
3. switch (selectedValue)
4. {
5. case "Name":
6. $rowsSex.hide();
7. $rowsName.show();
8. break;
9. case "Sex":
10. $rowsSex.show();
11. $rowsName.hide();
12.
补充：Web开发 , 其他 ,
