今天做静态页面时有一个需求,就是页面上有一组两个选项的单选按钮和一个有6行的列表(该列表用Table标签实现,不是DIV),当选择单选按钮的选项一时,列表的前三条信息显示后三条信息隐藏,当选择单选按钮的选项二时,列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉,如何实现呢?实现后该实现还能应用到哪些场景?
1、第一反应的解决方案
碰到这个需求后,我第一反应就是很简单啊,分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来,然后通过JS控制DIV的显示。
今天做静态页面时有一个需求,就是页面上有一组两个选项的单选按钮和一个有6行的列表(该列表用Table标签实现,不是DIV),当选择单选按钮的选项一时,列表的前三条信息显示后三条信息隐藏,当选择单选按钮的选项二时,列表的前三条信息隐藏后三条信息显示。那么就牵扯出我们今天的话题拉,如何实现呢?实现后该实现还能应用到哪些场景?
1、第一反应的解决方案
碰到这个需求后,我第一反应就是很简单啊,分别用两个DIV将前三个Table中的TR标签与后三个TR标签包起来,然后通过JS控制DIV的显示。
$("#divName").style.display = "none"; $("#divSex").style.display = "block"; 第三步:运行程序,你会发现根本不管用,哈哈,有点被耍的感觉~!因为TR标签只能与TABLE标签搭配使用!好啦,虽然上面的代码不管用!但是还算起到了一个引导的作用吧,失败是成功的老娘嘛!
2、推荐的使用panel解决方案
这是在我描述了DIV与TR不能配合使用后,被同事笑话啦,哎、看来以后要多多学习学习HTML啦,笑话完我后,同事董宁告诉我用PANEL控件包住TR,用Visible属性在服务器级别控制TR的输出。
这种方法虽然没有问题,但是感觉还是太无厘头了吧?控制页面展示的代码也要让服务器端去做吗?太浪费性能了!而且页面控制的代码与逻辑交互代码放一起简直是混乱不堪啊,在否决掉这个办法时,我们的大侠歪歪同志登场了,说道歪歪同志我不得不佩服啊,身为项目经理的歪歪,写代码的功底竟然比程序员还猛,完全无需代码提示,纯手工敲击键盘加清晰思路完美解决该问题!
3、无厘头解决方案
那么,我们来看这个思路,首先给每个TR标签赋予一个class样式,但是这个样式是没有实现的,仅仅做获取该TR的标识。
4、根据第三个方案的实现联想的应用场景
我们现在可以控制TABLE中TR的显示与隐藏后,我们可以想到ASP.NET GridView控件在绑定数据后输出到浏览器后的数据部分,也是用TR的形式来显示的,那么我们可不可以控制GridView内容的显示与隐藏呢?当然没问题了。
此时我们运行页面,查看页面输出的源代码会看到GridView数据部分的所有TR都被赋予了一个class="test"属性!
GridView1.DataSource = sList;
GridView1.DataBind();
}
}
呵呵,实现这个功能的原因、人物、灵感、整个前因后果就介绍完啦,编程嘛不仅是要实现功能,更要融于生活。
以上四个方法都是紧密相连,互相有联系的,希望大家细细品味,仔细琢磨,真正成为自己的东西,运用到学习中。
原文链接:https://www.f2er.com/jquery/52254.html