jQuery 表格隔行变色代码[修正注释版]
发布时间：2013-05-20 编辑：jiaochengji.com
代码比较精简，大家可以了解下jquery的对象控制方法
代码比较精简，大家可以了解下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=gb2312" />
<title>jquery 奇偶变色</title>
<script src="http://img.jb51.net/jslib/jquery/jquery1.3.2.js"></script>
<script>
$(document).ready(function() {
$('tr').addClass('odd');
$('tr:even').addClass('even'); //奇偶变色，添加样式
});
</script>
<style>
#hacker tr:hover{
background-color:red; //使用CSS伪类达到鼠标移入行变色的效果，比Jquery 的mouseover,hover 好用
}
.odd {
background-color: #ffc; /* pale yellow for odd rows */
}
.even {
background-color: #cef; /* pale blue for even rows */
}
</style>
</head>
<body>
<table id="hacker">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
</body>
</html>
下面是一个js版本的，需要的朋友可以参考下。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
复制代码 代码如下:
<!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=gb2312" />
<title>jquery 奇偶变色</title>
<script src="http://img.jb51.net/jslib/jquery/jquery1.3.2.js"></script>
<script>
$(document).ready(function() {
$('tr').addClass('odd');
$('tr:even').addClass('even'); //奇偶变色，添加样式
});
</script>
<style>
#hacker tr:hover{
background-color:red; //使用CSS伪类达到鼠标移入行变色的效果，比Jquery 的mouseover,hover 好用
}
.odd {
background-color: #ffc; /* pale yellow for odd rows */
}
.even {
background-color: #cef; /* pale blue for even rows */
}
</style>
</head>
<body>
<table id="hacker">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
</body>
</html>
下面是一个js版本的，需要的朋友可以参考下。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
您可能感兴趣的文章：
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
jQuery 行背景颜色的交替显示(隔行变色)实现代码
jQuery 表格隔行变色代码[修正注释版]
javascript实现隔行变色函数代码一例
JQuery实现表格隔行换色(隔行变色)效果代码一例
使用jquery hover事件实现表格的隔行换色功能示例
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
JS控制表格隔行变色的实现代码
Js实现表格隔行变色，鼠标经过时高亮显示的代码
js 隔行变色的最简单代码
[关闭]