May
23
2013
Jquery实现表格隔行变色的效果
作者：
绝缘体.. 发布：
2013-05-23 14:12 分类：
未分类 阅读：
抢沙发
表格隔行变色效果是一种非常常见的效果，以前用javascript实现起来感觉还挺复杂的，如今通过jquery只需要一句代码就OK了，真的很强大，下面就来看看具体如何使用jquery实现表格隔行变色的效果吧。
隔行变色效果图如下：
Jquery实现表格隔行变色的效果的具体示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.phpernote.com</title>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"> </script>
<script language="javascript">
$(document).ready(function(){
$('table tr:nth-child(odd)').addClass('edit');
});
</script>
<style type="text/css">
.edit{background-color:#a5e5aa;}
</style>
<body>
<table border="1">
<tr>
<td>1</td>
<td>php程序员的笔记</td>
</tr>
<tr>
<td>2</td>
<td>php教程网</td>
</tr>
<tr>
<td>3</td>
<td>http://www.phpernote.com</td>
</tr>
<tr>
<td>4</td>
<td>php程序员的笔记,php教程</td>
</tr>
<tr>
<td>5</td>
<td>靠谱的php程序员网站</td>
</tr>
</table>
</body>
</html>
微信扫一扫，打赏作者吧～
Jquery实现表格隔行变色的效果：等您坐沙发呢！
发表评论
