`
netmail2012
  • 浏览: 4148 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

隔行变色table

隔行变色table好看的table鼠标移上变色table 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> hftable </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" type="text/css" href="table.css"> 
 </head>
 <style>
	.hftable th,td{
	font:11px Arial, Helvetica, sans-serif; line-height:20px;
	}
	.hftable{border-collapse:collapse;}
	.hftable th, td{text-align:left;padding:3px 2px;border:1px solid #dddddd;}
	.hftable th{background:#328aa4;color:#fff;}
	.hftable td{background:#e5f1f4;}

	.hftable td.nomarl{background:#e5f1f4;}
	.hftable td.empty{background:#fff;}
	.hftable td.over{background:#bce774;}
 </style>
 <script language="javascript">
   window.onload = function(){
		this.init = function(){
			var oTable = document.getElementById("hftable");
			oTable.className = "hftable";

			var trArr  = oTable.getElementsByTagName("tr");
			for(var i=1;i<trArr.length;i++){
				var tdArr = trArr[i].childNodes;

				for(var j=0;j<tdArr.length;j++){

					if(i%2==0) {tdArr[j].className = "empty"}
					else{tdArr[j].className = "nomarl"};

					tdArr[j].onmouseover = function(){
						over(this);	
					};
					tdArr[j].onmouseout = function(){
						out(oTable,i);
					};
				}
			}
		};
		this.over = function(obj){
			var td = obj.parentNode.childNodes;
			for(var i=0;i<td.length;i++){
				td[i].className = "over";
			}
		};
		
		this.out  = function(obj,rowNum){
			init();
		};
		init();
	};
 </script>

 <body>
		<table cellspacing="0" cellpadding="0" id="hftable" style="width:600px;">
			<tr>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>	
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
		</table>
 </body>
</html>
  • 大小: 29.7 KB
分享到：
oracle常用sql
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    razor table分页、隔行变色 table_pages_color_demo

    本示例“razor table分页、隔行变色 table_pages_color_demo”专注于如何在网页上展示数据，同时实现表格的分页功能和隔行变色效果，以提高用户体验。 首先，我们需要理解`razor`语法。Razor视图引擎的核心是`....

    jquery选取商品隔行变色

    在网页设计中，为了提升用户体验和视觉效果，我们经常需要对数据列表进行美化处理，比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更...

    表格颜色自动隔行变色

    "表格颜色自动隔行变色"是一种常见的美化技巧，它可以使表格看起来更清晰、更易读，帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...

    CSS+JS实现table隔行变色

    对于table隔行变色，我们可以创建一个类，比如`.zebra-stripes`，然后将这个类添加到包含表格的`&lt;table&gt;`元素上。以下是一个简单的CSS示例： ```css .table.zebra-stripes tr:nth-child(odd) { background-color: ...

    隔行变色的表格（Table）

    比较实用的隔行变色的table，带js和复选框，全选反选

    jQuery动态生成隔行变色的table

    在网页开发中，为了提升用户体验，我们经常需要对表格数据进行视觉优化，其中一种常见的方法是实现隔行变色的效果。这个技术可以帮助用户更轻松地分辨表格中的每一行数据，提高阅读的舒适度。本教程将详细介绍如何...

    网页里面表格隔行变色代码

    在网页设计中，为了提升数据可读性和美观性，经常需要对表格进行隔行变色的处理。这种技术主要是通过CSS（层叠样式表）来实现的，使得表格的每一行交替显示不同的背景颜色，从而形成视觉上的区分。在本案例中，"网页...

    实现表格的隔行变色

    在网页设计中，为了提升数据展示的可读性和美观性，常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现...

    表格隔行变色

    在网页设计中，表格隔行变色是一种常见的视觉优化手段，它能帮助用户更清晰地分辨数据行，提高阅读和理解效率。特别是在处理大量数据的时间表格中，这种效果尤为重要。"表格隔行变色"技术通常结合JavaScript和CSS来...

    JQ 隔行变色

    标题“JQ 隔行变色”指的是使用jQuery（简称JQ）库来实现HTML表格或其他列表元素的隔行变色效果。这种效果常见于数据展示，通过交替颜色增加可读性和视觉吸引力。让我们深入了解一下如何实现这个功能以及相关的...

    jquery table ui插件制作css表格隔行变色特效代码

    总结，实现`jQuery table UI`插件制作的CSS表格隔行变色特效，主要分为以下几步： 1. 创建基本的HTML表格结构。 2. 引入`jQuery`库和`Table UI`插件的CSS和JS文件。 3. 使用`jQuery`选择器和CSS样式实现隔行变色。 4...

    表格隔行变色，jquerys

    在网页设计中，为了提高数据可读性和用户体验，经常需要对表格进行隔行变色处理。这使得用户在浏览大量数据时更容易区分不同的行。在本案例中，我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的...

    g隔行变色.zip

    "隔行变色"是一种常见的视觉优化技巧，它使得表格中的数据更易于阅读和理解，尤其是在大量数据的情况下。本教程将深入探讨如何使用JavaScript实现表格的隔行变色功能，并允许您根据需求自定义颜色。 首先，让我们...

    CSS2+JS实现table隔行变色

    在网页设计中，为了提升数据表格的可读性，我们经常需要实现表格的隔行变色效果。这个功能可以通过结合CSS2和JavaScript来轻松完成。本文将详细介绍如何使用这两种技术来实现这一效果，并提供一个简单易懂的示例供您...

    jquery table鼠标滑过隔行变色表格样式代码

    jQuery 与 HTML 表格（table）的结合可以实现许多实用的功能，如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验，使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能，我们需要...

    jquery 15天学习笔记 02 table表格 隔行变色的问题

    隔行变色是一种常见的网页设计技巧，它能提高表格数据的可读性，使用户更容易区分和浏览数据行。 首先，我们需要了解HTML表格的基本结构，它由`&lt;table&gt;`元素作为容器，`&lt;tr&gt;`元素表示行，`&lt;th&gt;`元素用于表头，而`...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    ### JavaScript表格隔行变色 #### 知识点1：JavaScript表格隔行变色基本原理 JavaScript表格隔行变色是一种常见的前端视觉效果，通过为表格中的行设置不同的背景颜色，使得用户浏览时能够更加容易地分辨不同的行。...

    Table隔行变色的JavaScript代码

    在本段内容中，主要讲述了如何使用JavaScript（js）来实现表格（table）的隔行变色效果，同时响应鼠标交互事件，即鼠标悬停时改变行的背景颜色。以下是详细的知识点解析： 1. 表格隔行变色实现原理：利用JavaScript...

    表格渲染(悬浮变色,隔行换色,点击变色)

    /** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */

    隔行变色和鼠标滑过变色

    ### 隔行变色与鼠标滑过变色技术详解 在网页设计中，为了提升用户体验及美观性，经常会使用到隔行变色以及鼠标滑过时改变颜色的效果。这两种效果可以通过不同的技术来实现，包括使用`expression`（仅限于IE浏览器）...

Magicbox
Global site tag (gtag.js) - Google Analytics