文章阅读
用JSer让表格的奇数行和偶数行显示不同的样式
文章类别: JSer代码示例  更新日期: 2012-02-19 20:37:43.0  点击次数:4406
很多情况我们为了让显示的表格更加美观,会让表格的奇数行和偶数行分别显示不同的背景颜色,或其它不同的样式。
通常情况下,我们要在动态程序输出数据时,判断输出的行是奇数还是偶数,然后输出不同的样式,非常麻烦。
我们先来看看表格显示的效果:
0文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
1文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
2文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
3文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
4文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
5文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
6文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
7文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
8文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
9文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
使用JSer轻松制作这种显示效果:
第一步:首先我们给表格指定一个唯一的ID值,如下:
<table id="mygrid" ...
第二步:定义表格的一种背景样式,如下:
<style type="text/css">
#mygrid{background-color:white} /*这儿定义为白色背景*/
</style>
第三步,编写脚本,设置表格的另外一种行背景样式:
<script type="text/ecmacript">
JSer.exec(function(){
JSer("#mygrid tr:odd").css("background-color","#eee");
});
</script>
效果轻松搞定!
此效果应用了JSer的伪类选择符“:odd”,选中表格的奇数行,并设置其背景颜色。
您可以点击此链接,浏览JSer在线帮助文档:http://www.jdiy.org/jser-doc/
[ 上一篇 用JSer制作表单输入框效果   下一篇 JSer.autoComplete自动完成输入控件 ]
2011-2014    JDiy网页编程技术站   -   http://www.jdiy.org     All rights reserved     捐助作者


技术支持QQ:39886616 QQ群:7759217
联系JDiy作者: ziquee java/javascript WEB编程
E-mail:ziquee@abcbcd.com http://189.cn
*尊姓大名:

*电子邮箱:

*QQ号码:

*留言内容:
提交留言
取消
loading...
注:带"*"的为必填项。请如实填写您的E-mail或QQ号码以便我们能与您取得联系。