<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){ //页面所有元素加载完毕
var item = document.getElementById("tb"); //获取id为tb的元素(table)
var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
for(var i=0;i < trs.length;i++){//循环tr元素
if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
}
}
}
</script>
</head>
<body>
<table id="tb" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
</body>
</html>
使用JQ来隔行变色
<script language="javascript" >
$(function(){// dom元素加载完毕
$('#tb tbody tr:even').css("backgroundColor","#888");
//获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
//改变它的背景色.
})
</script>
效果图：
相关推荐
在本项目中，我们将会探讨如何使用 Webpack 的基本配置来实现一个简单的功能——隔行变色效果，这个功能通常在网页表格中用于提高可读性。 首先，让我们看一下 `webpack.config.js` 文件，这是 Webpack 的核心配置...
对于本例中的隔行变色效果，jQuery通过选择器和类操作使得表格中的奇数行和偶数行分别具有不同的背景颜色。具体实现时，代码首先为文档加载完成后设置了一个ready函数，然后使用了`:even`和`:odd`选择器来分别选中...
本文将详细讲解如何使用jQuery（简称JQ）来实现这一功能。 首先，我们要了解基本步骤： 1. **引入jQuery库**：在HTML文件中，我们需要通过`<script>`标签引入jQuery的JS文件。例如，这里使用的是`...
本文实例为大家分享了jquery隔行变色展示的具体代码，供大家参考，具体内容如下 效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </...
网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色
一些css的定义，可以根据需要自己选择。//显示单双行显示不同背景色【方法一】： // $... ”UL_id”> 单数</li> 双数</li> 双数</li> </ul> odd:单 even:双 jQuery 表格隔行变色代码li隔行换色改进版JS控制表格隔行变色
在本文中，我们将深入探讨jQuery选择器及其在实现网页元素隔行变色功能中的应用。jQuery选择器是jQuery库的核心部分，它极大地简化了DOM（文档对象模型）元素的选取和操作，使得开发者能够更加高效地操纵网页内容。 ...
在本篇文章中，作者详细介绍了如何利用JQuery实现表格隔行变色和突出显示当前行的功能。JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。使用JQuery可以大大简化...
1、功能需求：表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览 2、示例代码如下： 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD&...
在本文中，我们将探讨如何使用jQuery库中的hover事件来实现表格的隔行换色功能。这种功能通常用于提高表格数据的可视性，使得用户可以更容易地区分和阅读表格中的不同行。 首先，我们需要了解jQuery的hover事件。...
3. **隔行变色**：在表格中，隔行变色可以提高数据的可读性。jQuery可以通过遍历行并应用不同的CSS类实现这一功能。例如，使用`$('tr:even').addClass('evenColor')`和`$('tr:odd').addClass('oddColor')`分别对偶数...
商品列表通常用于电商网站，这个练习的重点是使用CSS和jQuery实现商品列表的隔行变色，增加视觉层次感。学员会学习到如何选择和操作奇偶行，以及如何通过CSS类的添加和移除来实现颜色的切换。 5. **练习5：全网热...
这在处理多个元素时非常有用，例如实现表格的隔行变色或为所有`<p>`元素添加点击事件。 6. **事件处理** jQuery对事件处理也进行了封装，如`click()`, `blur()`, `focus()`, `select()`, `submit()`等。这些方法...
650) this.width=650;” border=0> 650) this.width=650;” border=0> 代码很简单，在附件中，各位可以下载后直接运行. 代码如下:[removed] $(function() { jQuery.fn.... //隔行变色 奇数行 $(‘tbo
* septalLine even, 单行样式背景 隔行背景变色显示数据 效果 odd 双行样式背景 * glide tableStyle, table样式 table滑动样式 效果 hoverStrle, 鼠标滑动上来样式 checkStyle 鼠标...
在本文中，我们将探讨如何创建一个基于jQuery的表格插件，这个插件是受到easyUI的dataGrid的启发，具备动态加载JSON数据、自动分页、全选与反选、行悬停变色以及隔行变色等功能。下面将详细介绍这个过程。 首先，...
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...