<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>table隔行换色</title>
</head>
<style type="text/css">
.a1{ background-color:#F8F8F8; color:#0E30AE}
.a2{ background-color:#FFFFFF; color:#0E30AE}
.a11{ background-color:#B3C1F4; color:#0E30AE}
.a22{ background-color:#EDF1FF; color:#0E30AE}
</style>
<script type="text/javascript">
<!--
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tablename=document.getElementById("table1")
var tr1=tablename.getElementsByTagName("tr")
for(var i=1 ;i<tr1.length;i++){
tr1[i].onmouseover=function(){
this.style.fontWeight="bold";
this.style.backgroundColor="#fffed5";
}
tr1[i].onmouseout=function(){
this.style.fontWeight=""
this.style.backgroundColor=""
}
if(i%2==0){
tr1[i].className="a1";
}else{
tr1[i].className="a2";
}
}
}
onloadEvent(showtable);
-->
</script>
<body>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="100%">
<table border="0" cellpadding="3" cellspacing="1" width="100%" align="center" style="background-color: #b9d8f3;" id="table1">
<tr style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold">
<td><font size="2">列1</font></td>
<td><font size="2">列2</font></td>
<td><font size="2">列3</font></td>
</tr>
<tr>
<td nowrap="nowrap" align="left">11<font size="2"></td>
<td align="right"><font size="2">22</font></td>
<td align="right"><font size="2">33</font></td>
</tr>
<tr>
<td nowrap="nowrap" align="left">11<font size="2"></td>
<td align="right"><font size="2">22</font></td>
<td align="right"><font size="2">33</font></td>
</tr>
<tr>
<td nowrap="nowrap" align="left">11<font size="2"></td>
<td align="right"><font size="2">22</font></td>
<td align="right"><font size="2">33</font></td>
</tr>
<tr>
<td nowrap="nowrap" align="left">11<font size="2"></td>
<td align="right"><font size="2">22</font></td>
<td align="right"><font size="2">33</font></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
效果图：
- 大小: 27.2 KB
分享到：
相关推荐
本教程将详细讲解如何实现表格的隔行换色以及点击整行变色的效果，这两种技术可以提升用户体验，使表格内容更加清晰易读。 首先，让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果，因为它使得交替的行...
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
本文将详细介绍如何在IE8及Chrome中解决table隔行换色的问题。 首先，我们来看IE8以上版本的解决方案。在这些较新的浏览器中，CSS3的特性通常能得到较好的支持。一个简单的CSS方法可以实现隔行换色，无需JavaScript...
在IT领域，网页开发是不可或缺的一部分，而"codeAjax选项卡、隔行换色、弹出层"这三个概念都是网页动态交互设计中的重要元素。让我们分别深入探讨它们的原理和应用。 首先，codeAjax选项卡是一种常见的用户界面设计...
在网页设计中，为了提高数据表格的可读性，我们经常需要实现隔行换色的效果。这使得用户在浏览大量数据时能更容易地区分每一行，从而减轻视觉疲劳。jQuery，一个广泛使用的JavaScript库，提供了方便的方式来实现这个...
在网页设计中，为了提升用户体验和视觉效果，我们经常需要对表格或者列表数据进行隔行换色处理，同时实现鼠标经过时的样式变化。jQuery，一个广泛使用的JavaScript库，提供了便利的方法来实现这些功能。本篇文章将...
在网页设计中，为了提升用户体验和视觉效果，经常会使用到一些动态特效，其中“隔行换色”是一种常见的表格美化技巧。本知识点主要讲解如何利用jQuery库来实现这个功能。 jQuery是一个广泛使用的JavaScript库，它...
在网页设计中，隔行换色是一种常见的视觉增强技巧，用于提高表格或列表的可读性。`jQuery`，作为一款强大的JavaScript库，为开发者提供了便捷的方法来实现这样的效果。本教程将详细介绍如何使用`jQuery`实现隔行换色...
在网页中，我们经常需要对数据进行各种各样的处理，比如在表格或者列表中实现隔行换色，以增强用户的阅读体验。这个主题“JavaScript隔行换色”就是关于如何使用JavaScript来实现这个功能的。 隔行换色通常应用于...
在本教程中，我们将深入探讨如何使用jQuery实现表格的隔行换色效果，这是一项常见的网页美化技术，可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化DOM操作，让...
标题中的“隔行换色”可能是指在电子文档或网页设计中的一种视觉效果，通常用于减少屏幕闪烁，提高阅读舒适度。在某些显示设备上，连续的文本行可能会因为刷新率的原因产生轻微的交错，导致视觉上的不清晰。为了解决...
在网页设计中，隔行换色的表格效果是一种常见的视觉优化手段，它能帮助用户更清晰地识别和区分表格中的数据。本示例"实现表格隔行换色效果"主要涉及JavaScript（JS）编程和HTML表格元素的使用，旨在通过JS特效提升...
var table=document.getElementById("table"); var trs=table.getElementsByTagName("tr"); var i; var color1='#FFFFFF'; var color2='#F8F8F8'; for(i=1;i;i++){ if(i%2==0){ trs[i].className='two'; }...
标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能，包括隔行换色、移动换色以及点击换色。首先，我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...
一、隔行换色 代码如下: $(“tr:odd”).css(“background-color”,”#eeeeee”); $(“tr:even”).css(“background-color”,”#ffffff”); 或者一行搞定： 代码如下: $(“table tr:nth-child(odd)”).css(...
对于table隔行变色，我们可以创建一个类，比如`.zebra-stripes`，然后将这个类添加到包含表格的`<table>`元素上。以下是一个简单的CSS示例： ```css .table.zebra-stripes tr:nth-child(odd) { background-color: ...
在网页设计中，隔行换色是一种常见的视觉效果，它能帮助用户更清晰地阅读表格、列表等数据密集型内容。CSS（层叠样式表）和JavaScript（JS）结合使用可以实现这一功能。下面我们将详细讲解如何利用CSS和JS来实现隔行...
隔行换色的table表格小例子 jQuery,为初学者练习所用.下着玩玩.