js实现Table隔行变色,支持鼠标经过,标题行处理,兼容IE和FF
<!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>无标题文档</title>
<style type="text/css">
.tdFirstColor {
background-color: #C00;
}
.tdSecondColor {
background-color: #33F;
}
.tdOverColor {
background-color: #F90;
}
.thColor{
background-color:#666;
}
</style>
<script language="javascript" type="text/javascript">
if(document.all){
//IE
document.attachEvent("onreadystatechange",function(){
if(document.readyState=="complete"){
setTableStyle("tbFirst","tdFirstColor","tdSecondColor","tdOverColor",true,"thColor");
}
},false);
}else{
//FF
document.addEventListener("DOMContentLoaded",function(){
setTableStyle("tbFirst","tdFirstColor","tdSecondColor","tdOverColor",true,"thColor");
},false);
}
function setTableStyle(tableId,firstClass,secondClass,overClass,isOver,headClass){
var tb=document.getElementById(tableId);
for(i=0;i<tb.rows.length;i++){
tb.rows[i].className=headClass;
if(i%2==0){
if(tb.rows[i].cells[0].tagName=="TD")
tb.rows[i].className=firstClass;
}
else{
if(tb.rows[i].cells[0].tagName=="TD")
tb.rows[i].className=secondClass;
}
if(isOver && tb.rows[i].cells[0].tagName=="TD"){
var orgClassName;
if(document.all){
tb.rows[i].onmouseover=(function(){
return function(){
orgClassName=this.className;
this.className=overClass;
}
})();
tb.rows[i].onmouseout=(function(){
return function(){
this.className=orgClassName
};
})();
}
else{
tb.rows[i].addEventListener("mouseover",function(){
orgClassName=this.className
this.className=overClass;
},false);
tb.rows[i].addEventListener("mouseout",function(){
this.className=orgClassName;
},false);
}
}
}
};
</script>
</head>
<body>
<table id="tbFirst" width="760" border="1" cellpadding="5" cellspacing="0">
<tr>
<th> </th>
<th> </th>
<th> </th>
</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>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
在本案例中，我们探讨的主题是如何使用JavaScript实现一种常见的网页美化技巧——隔行变色，即当用户鼠标悬停在表格行上时，该行会改变颜色，以突出显示。这种效果常见于数据展示或列表中，可以引导用户的注意力，...
### 隔行变色与鼠标滑过变色技术详解 在网页设计中，为了提升用户体验及美观性，经常会使用到隔行变色以及鼠标滑过时改变颜色的效果。这两种效果可以通过不同的技术来实现，包括使用`expression`（仅限于IE浏览器）...
隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现表格的隔行变色，并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS（Cascading ...
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
"表格隔行变色"技术通常结合JavaScript和CSS来实现，同时也可能涉及到服务器端如JSP（JavaServer Pages）的技术应用。 1. **CSS基础应用**： CSS（层叠样式表）是用于定义网页元素外观的语言。在表格隔行变色中，...
在本段内容中，主要讲述了如何使用JavaScript（js）来实现表格（table）的隔行变色效果，同时响应鼠标交互事件，即鼠标悬停时改变行的背景颜色。以下是详细的知识点解析： 1. 表格隔行变色实现原理：利用JavaScript...
综上所述，实现"jquery table鼠标滑过隔行变色表格样式代码"涉及到HTML表格布局、CSS样式设计、jQuery选择器与事件处理等多方面知识。通过合理运用这些技术，我们可以创建出更具有吸引力和易用性的数据展示界面。在...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
纯JS代码实现隔行变色和鼠标移入高亮是一种高效且直接的方法，不需要依赖于任何第三方库，使用原生JavaScript即可完成。 从给定文件中提取的知识点可以分为以下几个部分详细说明： 1. HTML结构的建立：首先需要...
这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在给出的代码示例中，我们看到一个简单的实现方式。 首先，`window.onload`事件是JavaScript中的一个常见事件，它表示当...
在网页设计中，为了提升用户体验，常常需要对表格进行美化，比如实现隔行变色的特效。`jQuery`和`Table UI`插件是实现这一功能的强大工具。本篇文章将详细解析如何使用`jQuery`与相关`CSS`来制作一个具有隔行变色...
本文将详细解析如何利用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，帮助开发者为用户提供更加直观、友好的界面。 首先，表格隔行变色是一种常见的视觉技巧，它通过改变奇偶行的颜色差异来防止用户在...
<title>jQuery Table隔行变色 .odd { background-color: #f9f9f9; } .even { background-color: #ffffff; } <script src="https://code.jquery.com/jquery-3.6.0.min.js"> $(document).ready...
为了提高用户的阅读体验，我们经常需要对表格进行美化，如隔行变色、鼠标滑过选中变色等特效。这些效果可以通过JavaScript（简称JS）实现，JS是一种强大的客户端脚本语言，能够在浏览器端动态操作HTML元素，实现丰富...
本教程将详细讲解如何实现表格的隔行换色以及点击整行变色的效果，这两种技术可以提升用户体验，使表格内容更加清晰易读。 首先，让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果，因为它使得交替的行...
在网页设计中，表格（Table）是常见的数据展示方式，而为了提高用户体验，常常需要对表格进行美化，比如隔行变色以及高亮显示当前选中的行。本篇将详细介绍如何使用jQuery实现这一功能。 首先，jQuery是一个轻量级...
其中，操作表格（table）的视觉样式如隔行换色和鼠标经过变色是前端开发者经常要处理的场景。接下来，我们将从技术角度详细解读如何使用jQuery实现这两种效果。 首先，我们讨论如何实现table的隔行换色。隔行换色的...
在实际开发中，结合jQuery实现的隔行变色功能不仅限于列表项，还可以用于表格(`table`)的行(`tr`)等其他HTML元素，从而增强网页的视觉效果和用户体验。由于jQuery的兼容性好、跨浏览器支持强以及社区支持广泛，它在...
接着，在文档的 `<body>` 标签底部，我们引入了 `jquery-1.9.1.js`（jQuery 1.9.1 版本）和 `bootstrap.min.js`，这两个文件分别是 jQuery 库和 Bootstrap 的 JavaScript 插件，它们提供了交互和动态效果的支持。...