今天做静态页面时有一个需求，就是页面上有一组两个选项的单选按钮和一个有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; } }
这种方法虽然没有问题，但是感觉还是太无厘头了吧？控制页面展示的代码也要让服务器端去做吗？太浪费性能了！而且页面控制的代码与逻辑交互代码放一起简直是混乱不堪啊，在否决掉这个办法时，们的大侠歪歪同志登场了，说道歪歪同志不得不佩服啊，身为项目经理的歪歪，写代码的功底竟然比程序员还猛，完全无需代码提示，纯手工敲击键盘加清晰思路完美解决该问题！
3、同事 歪歪 大侠的无厘头解决方案
那么，们来看看歪歪的思路，首先给每个TR标签赋予一个class样式，但是这个样式是没有实现的，仅仅做获取该TR的标识。
第一步：给TR标签添加一个没有实现的class样式。代码如下：
table id= MyList tr >第二步：使用Jquery根据class获取TR元素，并且控制其隐藏或显示，代码如下：
var $rowsName = $( #MyList ).find( .NameCSS ); var $rowsSex = $( #MyList ).find( .SexCss ); switch (selectedValue) { case Name : $rowsSex.hide(); $rowsName.show(); break; case Sex : $rowsSex.show(); $rowsName.hide(); break; }
第三步：运行，完全没有问题，此问题解决！
4、根据歪歪大侠的实现联想的应用场景
们现在可以控制TABLE中TR的显示与隐藏后，们可以想到ASP.NET GridView控件在绑定数据后输出到浏览器后的数据部分，也是用TR的形式来显示的，那么们可不可以控制GridView内容的显示与隐藏呢？当然没问题了。
第一步：如何给GridView数据行加入class属性呢？们可以用GridView的行样式（ RowStyle Css >
asp:GridView ID= GridView1 runat= server RowStyle Css >此时们运行页面，查看页面输出的源代码会看到GridView数据部分的所有TR都被赋予了一个 >
第二步：绑定数据，代码如下：
if (!IsPostBack) { List Student sList = new List Student () { new Student(){ SID = s001 , SName= 张三 , SSex= 男 }, new Student(){ SID = s002 , SName= 李四 , SSex= 女 }, new Student(){ SID = s003 , SName= 王五 , SSex= 男 } }; GridView1.DataSource = sList; GridView1.DataBind(); } }
第三步：加入控制显示或隐藏GridView数据的按钮,代码如下：
input id= btn type= button value= 隐藏 onclick= ShowDate() /
第四步：实现控制显示和隐藏的JS方法，代码如下：
function ShowDate() { var val = $( #btn ).val(); var $rows = $( #GridView1 ).find( .test ); switch (val) { case 隐藏 : $rows.hide(); $( #btn ).val( 显示 ); break; case 显示 : $rows.show(); $( #btn ).val( 隐藏 ); break; } }
呵呵，实现这个功能的原因、人物、灵感、整个前因后果就介绍完啦，编程嘛不仅是要实现功能，更要融于生活