效果图：
代码：
<!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>
<title>表格跨行时隔行变色</title>
</head>
<style type="text/css">
td
{
border: 1px solid;
width: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var i = 0, j = 0, k = 0;
$("#tableShow tr").each(function (n) {
if ($(this).find("td").size() == 4) {
j = $(this).find("td:eq(0)").attr("rowspan");
};
i++;
if (k % 2 == 0 ) {
$(this).css("backgroundColor", "yellow")
};
if (i == j) {
i = 0;
k++;
};
});
})
</script>
<body>
<table id="tableShow" style="border: 1px solid">
<!--第一行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
<!--第二行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
<!--第三行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
<!--第四行-->
<tr>
<td rowspan="3">
aaa
</td>
<td rowspan="3">
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
</tr>
<tr>
<td>
ee
</td>
<td>
ff
</td>
</tr>
<tr>
<td>
gg
</td>
<td>
hh
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
表格颜色自动隔行变色
实现表格的隔行变色
js表格特效制作js表格变色效果，表格隔行变色，鼠标滑过显示单行变色效果，点击选中变色。内含js代码下载
表格隔行变色 表格变色 表格单元格标色，实现方式是奇偶数隔行变色，点击变色！
时间表格的隔行变色，以及鼠标移动到某行 高亮的效果
CSS+JS 实现表格隔行变色 鼠标移动变色
比较实用的隔行变色的table，带js和复选框，全选反选
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
表格隔行变色，jquerys
devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置（改变）显示值、固定列不移动（附源码）
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
2、表格的隔行变色.html
03-表格隔行变色.html
主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
NULL 博文链接：https://cwl123456.iteye.com/blog/1997909
表格隔行变色功能的实现（当鼠标经过当前行变颜色，当鼠标离开当前行变颜色，利用鼠标经过和离开事件完成）！！!
表格 隔行变色 基于JS 简单表格 颜色可以自行替换 很简单
实现效果为：表格隔行换色 鼠标移过变色 实现多选效果
表格隔行变色，也是一个提高用户体验的js效果。 效果实现： 表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。 鼠标移入某行时变颜色，移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。 表格点击...