非侵入实现，控制更方便
效果图：
复制代码 代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>javascript practice</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
table{width:300px;}
caption{background:#DCA;}
th{background:#FCA;width:50%;}
td{text-align:center;}
</style>
<script type="text/javascript">
$(document).ready(function(){
odd= {"background":"#EDA","color":"#3F5"};//奇数样式
even={"background":"#2DA","color":"#875"};//偶数样式
odd_even("#table_test",odd,even);
});
function odd_even(id,odd,even){
$(id).find("tr").each(function(index,element){
if(index%2==1)
$(this).css(odd);
else
$(this).css(even);
});
}
</script>
</head>
<body>
<table id="table_test">
<caption>标题<caption>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr></li>
</body>
</html>
您可能感兴趣的文章:
- javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
- jQuery 表格隔行变色代码[修正注释版]
- jquery 交替为表格添加样式的代码
- 基于Jquery的表格隔行换色，移动换色，点击换色插件
- 用JQuery实现表格隔行变色和突出显示当前行的代码
- JQuery操作表格(隔行着色,高亮显示,筛选数据)
- jQuery 选择表格(table)里的行和列及改变简单样式
- jQuery实现表格颜色交替显示的方法
- jQuery表格行上移下移和置顶的实现方法
- jquery实现表格隔行换色效果
- jquery自定义表格样式
![[AcWing 32] 调整数组顺序使奇数位于偶数前面](https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg)