jQuery 设置表格隔行变色、隔列变色

来源：互联网发布：汉藏语系知乎编辑：程序博客网时间：2024/06/04 18:49

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>隔行变色、隔列变色</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("table:eq(0) tr").each(function () {
$(this).find("td").each(function (i) {
if (i%2 != 0) {
$(this).css("background-color","#CCCCFF");
} else {
$(this).css("background-color","white");
}
});
});
$("table:eq(1) tr").each(function (i) {
if (i%2 != 0) {
$(this).css("background-color","white");
} else {
$(this).css("background-color","#CCCCFF");
}
});
$("table:eq(2)").find("tr:even").css("background-color","white").end().find("tr:odd").css("background-color","#CCCCFF");
$("table:eq(3) tr").find("td:even").css("background-color","white").end().find("td:odd").css("background-color","#CCCCFF");
});
</script>
</head>
<body>
<table width="80%">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<hr />
<table width="80%">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<hr />
<table width="80%">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<hr />
<table width="80%">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</body>
</html>