jquery实现奇偶行赋值不同css值
更新时间：2012年02月17日 22:06:16 作者：
通常为了让页面呈现的更为美观，我们喜欢在奇偶行加上不同的颜色
效果如下：
<html>
<head>
<title>jquery奇偶行css效果</title>
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
/*table中偶数行*/
.tabEven
{
background: #9d8e8b;
}
/*table中奇数行*/
.tabOdd
{
background: #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#datalist tr:even").addClass("tabEven");
$("#datalist tr:odd").addClass("tabOdd");
});
</script>
</head>
<body>
<table id="datalist">
<tr><td>第1行</td></tr>
<tr><td>第2行</td></tr>
<tr><td>第3行</td></tr>
<tr><td>第4行</td></tr>
<tr><td>第5行</td></tr>
</table>
</body>
</html>
使用jquery我们可以轻松的实现上面效果，代码如下：
复制代码 代码如下:
<html>
<head>
<title>jquery奇偶行css效果</title>
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
/*table中偶数行*/
.tabEven
{
background: #9d8e8b;
}
/*table中奇数行*/
.tabOdd
{
background: #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#datalist tr:even").addClass("tabEven");
$("#datalist tr:odd").addClass("tabOdd");
});
</script>
</head>
<body>
<table id="datalist">
<tr><td>第1行</td></tr>
<tr><td>第2行</td></tr>
<tr><td>第3行</td></tr>
<tr><td>第4行</td></tr>
<tr><td>第5行</td></tr>
</table>
</body>
</html>
相关文章
用jquery实现的textarea 高度自适应代码。这个动画效果比较流畅。适合新手学习。非常简单实用，这里推荐给小伙伴们。2015-03-03
这篇文章主要介绍了jQuery的css()方法用法,以实例形式较为详细的分析了css()方法的几种常见用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了jQuery+ajax实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
JQuery居然没有操作cookie相关的函数，搜了下官方有个cookie的插件。2010-04-04
这篇文章主要介绍了jQuery实现表单动态添加与删除数据操作,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了jQuery实现的记住帐号密码功能,结合完整实例形式分析了jQuery使用jquery.cookie.js插件记录用户信息相关操作技巧,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了使用jquery+CSS实现控制打印样式,需要的朋友可以参考下2014-12-12
jquery 显示本地时间/ 带日期、星期/ UTC，需要的朋友可以参考下。2011-05-05
jQuery EasyUI API 中文文档 - Documentation 文档
jQuery EasyUI API 中文文档 - Documentation 文档，使用jQuery EasyUI的朋友可以参考下。2011-09-09
你有没有手工的编写过一些重复的代码？你也觉得它们是如此的无聊吧。好了，这里有更好的解决办法。2009-12-12
最新评论