jquery交替变换颜色的三种方法 实例代码
<!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>even and odd</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
alert("第一种");
$("tbody tr:even").css("background-color", "red");
$("tbody tr:odd").css("background-color", "yellow");
alert("第二种");
$("tbody tr").each(function (index){
alert(index);
if(0 == index%2)
{
$(this).css("background-color", "blue");
}
if(1 == index%2)
{
$(this).css("background-color", "green");
}
});
alert("第三种");
rows = document.getElementsByTagName("tr");
var length = rows.length;
for(var i=0; i< length;i++){
alert(i);
if(0==i%2){
rows[i].style.backgroundColor="#ffff00";
}else
{
rows[i].style.backgroundColor="#0000FF";
}
}
});
</script>
</head>
<body>
<table border="1">
<tbody >
<tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
<tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
<tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
<tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
<tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
<tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
</tbody>
</table>
</body>
</html>
您可能感兴趣的文章：
jQuery 行背景颜色的交替显示(隔行变色)实现代码
jquery交替变换颜色的三种方法 实例代码
jquery 如何动态添加、删除class样式方法介绍
修改bash提示字符串(username@hostname:~$)的方法
css的变量和继承的学习笔记
Linux shell中echo改变输出显示样式的方法
PS中常用的快捷键汇总介绍
jquery 动态添加、删除class样式的方法
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
jQuery语法总结和注意事项小结