如何使用jQuery实现隔行变色效果

如题所述

jQuery 选择器中,:even可以选择偶数行

示例如下

$("ul li").css("background","blue");
$("ul li:even").css("background","red");

温馨提示:答案为网友推荐,仅供参考
第1个回答  2019-12-16
控制表格行变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x行y列的表格</title>
<style>
table{border:2px solid #CFCFCF;
width:500px; border-collapse:collapse;}
td,th{border:2px solid #CFCFCF;}
td{height:40px;}
th{height:40px;}
.white{background:#FFF;}
.gray{background:#EEE;}
.title{background:#7D8BA5;}
</style>
</head>

<body>
<?php
//自定义行和列的数值
$row=5;
$col=10;
echo'<table class="title">';
//生成表格标题行
echo'<tr>';
for($i=1;$i<=$col;++$i){
echo'<th></th>';
}
echo'</tr>';
for($i=1;$i<=$row;++$i){
//控制表格的行
echo'<tr>';
$color=($i%2==0)?
'gray':'white';
echo'<tr class="'.$color.'">';

for($j=1;$j<=$col;++$j){ //控制表格的列
echo'<td></td>';
}
echo'</tr>';
}
echo'</table>';
?>
</body>
</html>
相似回答