`
哈达f
  • 浏览: 120281 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

每行间隔显示颜色

 
阅读更多
<!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>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<style type="text/css">
.one{
	background-color:#33FFCC;
	}
.two{
	background-color:#FFFF66;
	}
.over{
	background-color:#00FF00;
	}
</style>

<script type="text/javascript" src="../Day26/doctool.js"></script>

<script type="text/javascript">
//行颜色间隔显示
function trcolor()
{
	var tabNode = byTag("table")[0];
	
	var trs = tabNode.rows;
	
	for(var x=1; x<trs.length; x++)
	{
		if(x%2==1)
			trs[x].className = "one";
		else
			trs[x].className = "two";		
			
		trs[x].onmouseover = function()
		{
			name = this.className;
			this.className = "over";
		};
		
		trs[x].onmouseout = function()
		{
			this.className = name;
		}
	}
}

var name;

/*
function over(trNode)
{
	name = trNode.className;
	trNode.className = "over";
}

function out(trNode)
{
	trNode.className = name;
}*/
window.onload = trcolor;
</script>

</head>

<body>
<table>
	<tr>	
    	<th>姓名</th>
        <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
        <th>地址</th>
    </tr>
    
    <tr>	
    	<td>张三</td>
        <td>30</td>
        <td>北京</td>
    </tr>
    <tr>	
    	<td>李四</td>
        <td>4</td>
        <td>上海</td>
    </tr>
    <tr>	
    	<td>王武</td>
        <td>23</td>
        <td>广州</td>
    </tr>
    <tr>	
    	<td>赵六</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>	
    	<td>周七</td>
        <td>25</td>
        <td>大连</td>
    </tr>
    <tr>	
    	<td>孙八</td>
        <td>29</td>
        <td>铁岭</td>
    </tr>
    <tr>	
    	<td>赵六</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>	
    	<td>周七</td>
        <td>25</td>
        <td>大连</td>
    </tr>
    <tr>	
    	<td>孙八</td>
        <td>29</td>
        <td>铁岭</td>
    </tr>
</table>
</body>
</html>

 

分享到:
评论

相关推荐

    gridcontrol隔行变色、焦点行颜色、改变显示值、固定列

    在本文中,我们将深入探讨如何利用GridControl实现隔行变色、设定焦点行颜色、改变显示值以及固定列不移动这四个关键功能,并提供相关的源码示例。 1. **隔行变色**: 隔行变色是一种常见的视觉增强技巧,它可以...

    Gridview 每个item为正方形且有间隔颜色

    当我们希望每个项目(item)呈现为正方形并具有间隔颜色时,这通常涉及到自定义Adapter和设置特定的样式。下面我们将详细探讨如何实现"Gridview 每个item为正方形且有间隔颜色"这一功能。 首先,我们需要创建一个...

    颜色间隔的ListCtrl控件

    根据索引计算颜色,比如每n行改变一次颜色,或者根据数据的特定属性来决定颜色。 4. **设置画刷和绘制背景**:使用CDC类的FillSolidRect函数填充背景颜色,然后使用SetBkColor和SetTextColor函数设置文本的颜色。 ...

    javascript简单实现表格行间隔显示颜色并高亮显示

    //存储tr对象的类名,当鼠标移开时进行恢复 function trcolor(){ //表格行颜色间隔显示 var tabNode = document.getElementsByTagName(“table”)[0]; var trNodes = tabNode.rows; for(var x=1;x&lt;trNodes....

    表格颜色自动隔行变色

    隔行变色的基本原理是通过编程或者设置表格样式,使表格的偶数行或奇数行显示不同的背景颜色。这种色彩的交替使得表格行与行之间产生视觉差异,减轻了阅读时的疲劳感,提高了信息的可读性。 2. 实现方法: - ...

    行式报表—添加预警,间隔背景色-条件

    ### 行式报表—添加预警,间隔背景色-条件 ...综上所述,通过 FineReport 的条件属性功能,不仅可以轻松实现数据预警和背景色间隔显示等功能,还能进一步提升报表的实用性和美观度,帮助用户更高效地处理和分析数据。

    RecyclerView列表添加间隔线

    然而,RecyclerView在默认情况下并不会显示列表项之间的间隔线,这可能会导致视觉效果不理想,用户难以区分各个列表项。本篇将详细介绍如何为RecyclerView添加间隔线。 首先,我们来理解RecyclerView的基本结构。...

    在320*200彩色图形方式下,用四种颜色各显示一个矩形块

    ROW值增加30,确保矩形块并排显示,每个矩形之间有20个像素的间隔。 DISP_RECT子程序负责绘制单个矩形。它接受无参数调用,但通过使用堆栈保存和恢复通用寄存器(AX、CX、DX、SI、DI)的状态,确保在执行过程中不...

    用C++设计一个程序,随机显示10个0-150之间的随机数,并把这10个数用不同颜色的条形图高度显示出来,每1秒刷新一次,绘制出趋势图,将数保存到文件中

    可以为每个条形或线段设置不同的颜色,增强视觉效果。 7. **用户界面**:在MFC中创建一个窗口,并在窗口上放置TeeChart控件,确保在定时器触发时更新的是窗口上的图表。 综合这些知识点,你可以构建一个完整的C++...

    用labview/cvi实现一组流水灯,时间间隔和颜色可以人工设定,用COLOR numeric实现

    1. **创建用户界面**:首先,你需要设计一个用户界面,让用户能够设定时间间隔和选择颜色。这里,"COLOR numeric"控件允许用户输入RGB值(红色、绿色、蓝色)来设定LED灯的颜色。同时,添加一个滑动条或文本框来设置...

    delphi图片操作颜色渐变特技显示简单动画

    例如,每过一定时间间隔(Timer的Interval属性),我们就更换TImage的图片,使其显示下一帧,这样就可以看到连续的变化。 5. **百叶窗效果**: 百叶窗效果是一种常见的图像显示特效,通常通过遮罩或逐行显示的方式...

    LabVIEW多列列表框上色隔行变色.rar

    5. **事件处理**:如果列表框的数据会动态更新,比如通过添加、删除或编辑行,我们需要监听`Value Change`事件,并重新执行上述步骤以保持颜色间隔。 6. **交互性**:确保用户界面的友好性,例如,当用户选择列表框...

    C#form不断变化背景颜色

    在本例中,开发者可能设置了一个Timer,每隔一定时间间隔(例如1秒)触发一次`Tick`事件,从而实现背景颜色的连续变换。 3. **Random类**: Random类是.NET Framework提供的,用于生成随机数的类。在这里,开发者...

    DevExpress WPF ChartControl 自定义X轴Y轴标签颜色

    在本案例中,我们将深入探讨如何实现X轴和Y轴标签颜色的自定义,让正值显示为绿色,负值显示为红色。 首先,了解DevExpress WPF ChartControl的基础概念。ChartControl主要由几个关键组件构成:Series(系列)代表...

    li列表隔行不同色CSS设计

    "li列表隔行不同色CSS设计"是一个常见的需求,目的是使列表的每一行在颜色上有所区分,特别是鼠标悬停时,用户可以更清晰地感知到当前所选的行。这通常通过CSS实现,无需依赖JavaScript或其他编程语言。 首先,我们...

    行业资料-电子功用-具有光阻间隔物的液晶显示装置和电润湿显示装置的说明分析.rar

    在电润湿显示装置中,电极上的彩色油滴和水滴通过改变电场来调节接触角,从而改变颜色的显现。这种技术在电子阅读器中尤其受欢迎,因为它能提供类似纸张的阅读体验,减轻眼睛疲劳,且能耗极低,因为只有在翻页时才...

    vc歌词显示 按行显示滚动歌词

    每行歌词前有对应的时间标签,例如`[00:30.50]`表示该句歌词在歌曲中的起始时间。 2. **文件读取与解析** - 使用C++的文件流(fstream)库来读取LRC文件内容。 - 解析时间戳和歌词,将其存储到数据结构(如结构体...

    DataGridView控件设置行样式、单元格样式

    - `DefaultCellStyle`:每个`DataGridView`行都有一个默认的`DefaultCellStyle`属性,可以设置字体、颜色、背景色等。例如,你可以使用`DefaultCellStyle.BackColor = Color.LightGray;`来改变行的背景色。 - `...

    TCS230颜色识别 原理+程序

    6. 结果显示:最后,将识别出的颜色信息以人类可读的形式输出,例如在显示屏上显示颜色名称或RGB值。 综上所述,TCS230颜色识别技术结合了物理光学原理和数字信号处理,通过编程实现颜色识别功能。这个资料齐全的...

Global site tag (gtag.js) - Google Analytics