如何使用jQuery实现隔行变色效果
2个回答
展开全部
jQuery 选择器中，:even可以选择偶数行
示例如下
$("ul li").css("background","blue");
$("ul li:even").css("background","red");
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
控制表格行变色
<!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>
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
