效果图：
代码：
<!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>
分享到：
相关推荐
隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现表格的隔行变色，并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS（Cascading ...
在网页设计中，为了提升用户体验及美观性，经常会使用到隔行变色以及鼠标滑过时改变颜色的效果。这两种效果可以通过不同的技术来实现，包括使用`expression`（仅限于IE浏览器）或JavaScript等方法。下面将对这些技术...
在Web开发过程中，经常会遇到需要对表格进行视觉样式上的优化，比如对表格中的行进行隔行变色处理，以此来提高表格的可读性。JavaScript是一种广泛应用于网页动态交互效果的编程语言，它允许开发者对网页元素进行...
在实际开发中，结合jQuery实现的隔行变色功能不仅限于列表项，还可以用于表格(`table`)的行(`tr`)等其他HTML元素，从而增强网页的视觉效果和用户体验。由于jQuery的兼容性好、跨浏览器支持强以及社区支持广泛，它在...
此外，jQuery还引入了一些特有的选择器，如`:even`和`:odd`，用于选取偶数或奇数索引的元素，这在实现隔行变色等效果时非常有用。 2. jQuery选择器的优势： 相比于传统的JavaScript DOM操作，jQuery选择器具有以下...
在传统的纯 CSS 页面中，实现隔行变色需要手动为每个偶数行添加额外的 CSS 类，这不仅繁琐，而且难以维护。例如： ```html <td>... <td>... <td>... ... ``` 其中 `.altrow` 类用于设置偶数行的...
3. **具有间隔色**：为了提高表格的可读性，可以设置间隔色，即隔行变色。这可以通过CSS实现，例如使用`:nth-child(odd)`和`:nth-child(even)`选择器来分别定义奇数行和偶数行的背景颜色。 4. **鼠标进过高亮显示**...
隔行变色是提高表格可读性的常用技巧。通过JavaScript，我们可以很容易地根据行的索引改变背景色。 在提供的代码中，通过判断行索引`i`的奇偶性来交替设置行的背景色。如果行索引`i`是奇数（即`i % 2 == 1`），将...
3. 表格的动态样式变化：具体实现中，通过给表格的行添加CSS类`odd`和`even`来实现隔行变色效果。这表明了利用jQuery操作CSS类的便捷性，可以轻松地为表格的行添加或移除样式类，从而改变表格行的样式。 4. 表格...
### JavaScript操作Table的特性 ...通过上述代码，我们可以实现一个功能完善的表格，其中包括动态排序、隔行变色以及导出到Excel等功能。这些技术在实际开发中非常实用，可以极大地提高用户界面的友好性和交互性。
优化表格样式设置，现在边框和隔行变色等样式会直接应用在单元格上，而不是通过CSS类名，避免在ZUI基础样式缺失的情况下丢失样式；优化了右键菜单上的项目，当一些条目在特定情况下不可用时不会显示，例如当光标处于...
例如，通过一行代码 `$("table tr:even").css("background-color", "#a5e5aa")`，即可轻松实现表格隔行变色的效果。 要开始使用 jQuery，首先需要从官方网站（http://jquery.com）下载库文件，有开发版（未压缩，约...
在Web开发中，为了提高用户体验，经常需要对表格进行美化处理，比如让表格的每一行隔行变色。这种方式不仅美观，还能帮助用户更容易地阅读和理解数据。 **原始JavaScript实现：** ```javascript window.onload = ...
- **表格样式优化**: 实现表格的隔行变色和选中行高亮等效果。 - **表格内容过滤**: 为表格添加搜索功能，方便用户查找数据。 - **简易选项卡**: 创建简单的选项卡式导航栏。 - **颜色改变组件**: 允许用户自定义...
文档在描述完jQuery的功能后，通过一个实例——表格隔行变色，来具体说明jQuery的优势。通过比较使用原生JavaScript与使用jQuery实现相同效果的代码，来展示jQuery在代码简洁性和易读性上的优势。原生JavaScript代码...