jquery选择器tr:even获取偶数行、tr:odd 获取奇数行

来源:互联网 发布:2030男女比例真实数据 编辑:程序博客网 时间:2024/06/05 20:16

在jquery中:

$('table tr:even')  -> 表示获取一个table 所有的索引为偶数的行, 其中索引index 从0开始算起, 0算偶数!

$('table tr:odd')  ->   表示获取一个table 所有的索引为奇数的行, 其中索引index 从0开始算起, 0算奇数!


Eg:

创建一个有6行数据的表格, 让奇数行的背景色为green, 偶数行的字体色为red,代码如下:

1. 导入jquery。

   2. 创建表格。

   3. 编写脚本。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="10">
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
<tr><td>AA</td><td>BB</td><td>CC</td></tr>
</table>

<script type="text/javascript">
$("table tr:even").css("background-color","green");
$("table tr:odd").css("color","red");

</script>
</body>
</html>

原创粉丝点击