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交替变换颜色的三种方法 实例代码
- 三种动态加载js的jquery实例代码另附去除js方法
- 三种动态加载js的jquery实例代码另附去除js方法
- JS创建事件的三种方法(实例代码)
- 修改或扩展jQuery原生方法的代码实例
- jquery动态加载js三种方法实例
- 方便的选中记录方法(交替项颜色变换):点击DataGrid的一条记录,则选中此记录。
- jquery的颜色选择插件实例代码
- jQuery中each遍历的三种方法实例分析
- JQuery选中checkbox方法代码实例(全选、反选、全不选)
- JQuery 获取json数据$.getJSON方法的实例代码
- jquery动态加载js三种方法实例
- 修改或扩展jQuery原生方法的代码实例
- jQuery实现表格颜色交替显示的方法
- Android 自定义弹性ListView控件实例代码(三种方法)
- 一:从实例入手之设置设置颜色交替显示的GridView(方法一)
- jQuery实现表格颜色交替显示的方法
- JQuery 获取json数据$.getJSON方法的实例代码
- php获取远程文件大小的三种方法(实例代码)