js实现隔行变色操作鼠标经过效果，下面是javascript代码
<script type="text/javascript">
/**隔行变色**/
function changColor()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
if(i%2==0)
{
tr_Element[i].className = "tr_style_1";
}else
{
tr_Element[i].className = "tr_style_2";
}
}
}
/**鼠标经过的效果**/
function tr_color()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
tr_Element[i].old_class = tr_Element[i].className; //先让这个类old_class属性记住它以前的样式
tr_Element[i].onmousemove = function ()
{
this.className = "tr_style";
}
tr_Element[i].onmouseout = function ()
{
this.className = this.old_class; //当鼠标移开之后还原以前的样式
}
}
}
/**当页面加载时执行**/
window.onload = function (){
changColor();
tr_color();
}
</script>
下面是css代码
<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}
/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>
下面是完整代码：
<!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=utf-8" />
<title>js实现隔行变色操作鼠标经过效果</title>
<style type="text/css">
/**隔行变色样式**/
.tr_style_1 { background-color:#00FFCC;}
.tr_style_2 { background-color:#FFFF00;}
/**鼠标经过样式**/
.tr_style { background-color:#00FF00; color:#FFFFFF;}
</style>
<script type="text/javascript">
/**隔行变色**/
function changColor()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
if(i%2==0)
{
tr_Element[i].className = "tr_style_1";
}else
{
tr_Element[i].className = "tr_style_2";
}
}
}
/**鼠标经过的效果**/
function tr_color()
{
var table_Element = document.getElementById("table_style");
var tr_Element = table_Element.rows;
for(var i=0;i<tr_Element.length;i++)
{
tr_Element[i].old_class = tr_Element[i].className; //先让这个类old_class属性记住它以前的样式
tr_Element[i].onmousemove = function ()
{
this.className = "tr_style";
}
tr_Element[i].onmouseout = function ()
{
this.className = this.old_class; //当鼠标移开之后还原以前的样式
}
}
}
/**当页面加载时执行**/
window.onload = function (){
changColor();
tr_color();
}
</script>
</head>
<body>
<table border="1" width="200" height="150" id="table_style" cellpadding="0" cellspacing="0">
<tr>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>美国</td>
<td>美国</td>
<td>美国</td>
</tr>
<tr>
<td>俄罗斯</td>
<td>俄罗斯</td>
<td>俄罗斯</td>
</tr>
<tr>
<td>日本</td>
<td>日本</td>
<td>日本</td>
</tr>
<tr>
<td>新加坡</td>
<td>新加坡</td>
<td>新加坡</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
js斑马线，兼容隔行变色，鼠标经过变色，鼠标离开返回，兼容所有浏览器
CSS+JS 实现表格隔行变色 鼠标移动变色
### JavaScript表格隔行变色及鼠标交互效果实现 在网页设计与开发中，为了提升用户体验，经常需要对表格中的数据进行美化处理。其中一项常用的技术就是实现表格的隔行变色以及鼠标移入移出、点击等交互效果。本文将...
通过以上介绍，我们可以看到使用`expression`可以在IE浏览器中快速实现隔行变色及鼠标滑过变色的效果，但这种方法的兼容性和可维护性较差。相比之下，使用JavaScript则能更好地兼容各种浏览器，并且代码更加灵活易懂...
本文将详细讲解如何实现表格的隔行变色，并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS（Cascading Style Sheets）来实现，CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的...
本文主要探讨了如何使用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，以增强表格的可读性和用户的操作体验。 首先，隔行变色是一种常见的视觉分隔技巧，它有助于用户在查看大量数据时避免混淆行与行之间...
根据给定文件的信息，本文将详细介绍如何利用JavaScript实现表格或列表项的隔行变色以及鼠标划过时的颜色变化效果。 ### 一、基础知识简介 #### 1. CSS选择器 CSS选择器用于选取HTML文档中的元素。在本例中，我们...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用CSS（层叠样式表）来完成，通过设置不同的背景颜色或者使用渐变色，使表格的偶数行与奇数行呈现出不同的视觉效果。在...
"表格隔行变色"技术通常结合JavaScript和CSS来实现，同时也可能涉及到服务器端如JSP（JavaServer Pages）的技术应用。 1. **CSS基础应用**： CSS（层叠样式表）是用于定义网页元素外观的语言。在表格隔行变色中，...
纯JS代码实现隔行变色和鼠标移入高亮是一种高效且直接的方法，不需要依赖于任何第三方库，使用原生JavaScript即可完成。 从给定文件中提取的知识点可以分为以下几个部分详细说明： 1. HTML结构的建立：首先需要...
为了提高用户的阅读体验，有时候我们需要对表格进行美化，例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先，让我们了解一下JavaScript在网页中的作用。...
此外，隔行变色和鼠标滑过时的颜色变化都是通过修改CSS样式来实现的，主要是通过JavaScript修改div元素的style属性中的backgroundColor来实现的。 4. 隔行变色效果实现： 隔行变色可以通过判断当前行数的索引，并...
在本例中，我们将探讨如何使用JavaScript实现列表页面的隔行变色效果。这个效果通常应用于表格，使得用户在浏览数据时能更快地区分每一行。 首先，我们需要一个包含数据的HTML表格。在示例代码中，我们有一个ID为`...
总的来说，JavaScript提供了一种动态操作网页元素的强大能力，使得我们可以轻松地实现诸如隔行变色这样的交互效果。这个例子展示了如何结合CSS和JavaScript来提升用户体验，让数据更易于阅读和理解。对于前端开发者...