今天做静态页面时有一个需求，就是页面上有一组两个选项的单选按钮和一个有6行的列表（该列表用table标签实现，不是div），当选择单选按钮的选项一时，列表的前三条信息显示后三条信息隐藏，当选择单选按钮的选项二时，列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉，如何实现呢？实现后该实现还能应用到哪些场景？
1、第一反应的解决方案
碰到这个需求后，我第一反应就是很简单啊，分别用两个div将前三个table中的tr标签与后三个tr标签包起来，然后通过js控制div的显示。
第一步：使用div包裹需要隐藏显示的tr。代码如下：
姓名：
年龄：

第二步：使用js控制div的显示，来达到控制隐藏或显示行的效果：
$(#divname).style.display = none;
$(#divsex).style.display = block;
第三步：运行程序，你会发现根本不管用，哈哈，有点被耍的感觉~！因为tr标签只能与table标签搭配使用！好啦，虽然上面的代码不管用！但是还算起到了一个引导的作用吧，失败是成功的老娘嘛！
2、推荐的使用panel解决方案
这是在我描述了div与tr不能配合使用后，被同事笑话啦，哎、看来以后要多多学习学习html啦，笑话完我后，同事董宁告诉我用panel控件包住tr，用visible属性在服务器级别控制tr的输出。
第一步：使用panel控件包住用来显示或隐藏的tr标签，代码如下：
姓名：
年龄：

第二步：在服务器端使用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样式。代码如下：
姓名：
年龄：

第二步：使用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的行样式（）来设置，代码如下：

此时我们运行页面，查看页面输出的源代码会看到gridview数据部分的所有tr都被赋予了一个class=test属性！
第二步：绑定数据，代码如下：
if (!ispostback) { list slist = new list() { new student(){ sid = s001, sname=张三, ssex=男}, new student(){ sid = s002, sname=李四, ssex=女}, new student(){ sid = s003, sname=王五, ssex=男} }; gridview1.datasource = slist; gridview1.databind(); } }
第三步：加入控制显示或隐藏gridview数据的按钮,代码如下：

第四步：实现控制显示和隐藏的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; } }
呵呵，实现这个功能的原因、人物、灵感、整个前因后果就介绍完啦，编程嘛不仅是要实现功能，更要融于生活。
以上四个方法都是紧密相连，互相有联系的，希望大家细细品味，仔细琢磨，真正成为自己的东西，运用到学习中。