booucn
- 浏览: 128301 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
border:1px solid #0058a3;
font-family:Arial;
border-collapse:collapse;
background-color:#eaf5ff;
font-size:14px;
}
.datalist caption{
padding-bottom:5px;
font:bold 1.4em;
text-align:left;
}
.datalist th{
border:1px solid #0058a3;
background-color:#4bacff;
color:#FFFFFF;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #0058a3;
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#c4e4ff;
}
-->
</style>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay">
<caption>Member List</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr>
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr>
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>whaler</td>
<td>W19</td>
<td>Jan 18th</td>
<td>Capricorn</td>
<td>1851918</td>
</tr>
<tr>
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr>
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr>
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr>
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr>
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr>
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr>
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName_r('tr');
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function(){ //鼠标在行上面的时候
this.className += 'altrow';
}
rows[i].onmouseout = function(){ //鼠标离开时
this.className = this.className.replace('altrow','');
}
}
</script>
</body>
</html>
分享到：
发表评论
-
如何使iframe透明
2010-07-18 16:38 703<html> <head><m ... -
li中的span右浮动下沉问题
2010-07-14 23:05 1088问题： 新闻列表中为了显示时间，加了个span<li& ... -
dedeCMS 标签学习
2010-06-03 14:58 1149最近在做一个dedecms的模 ... -
dede站怎么在首页调用单页的内容？【cms】
2010-06-03 11:45 1841我们知道，单页内容的模板调用标签是 {dede:field.c ... -
修改V5.6默认模板颜色样式的默认色为其它颜色--DeDe技巧
2010-06-02 04:22 1271打开 /templets/default/js/changeS ... -
jquery 下拉菜单- sub menu
2010-05-10 16:50 836http://javascript-array.com/sc ... -
jquery 滑动条-Slider
2010-05-10 15:33 1831效果如图： -
js预加载图片
2010-04-28 13:39 1618<script type="text/java ... -
CSS 圆角自扩展按钮
2010-04-22 13:51 842我们用 A 包含一个 SPAN 标签来实现此效果：预览 &l ... -
CSS 实现文字、图片垂直对齐(vertical-align)专题文章
2010-04-22 13:13 1654垂直对齐在 Firefox 和 IE7 等最新浏览器中，已经不 ... -
用 CSS 实现图片替换文字
2010-04-22 13:02 874介绍一下Gilder/Levin 的方法 <h2 ... -
dl,dt,dd标签 VS 传统table实现数据列表
2010-04-21 10:07 747table数据列表传统table的数据列表代码如下所示。我们要 ... -
css布局精髓
2010-04-20 17:45 662http://blog.html.it/layoutgala/ ... -
在HTML中调用XML数据
2010-04-13 18:20 1106<html> <head> < ... -
表格隔行变色
2010-04-13 18:12 777<html> <head> < ... -
xml与css-1
2010-04-13 18:05 618<?xml version="1.0" ...
相关推荐
在网页设计中，表格（Table）是一种常见的数据...通过这种方式，你可以实现表格鼠标经过时整行变色的效果，同时保持与其他框架的兼容性。在实际应用中，可以根据需求调整颜色、动画效果等细节，以达到最佳的视觉效果。
js 实现 鼠标经过表格时列变色! 值得下载看看!资源免费,大家分享!!
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,
通过jquery给经过的表格设置css背景变色效果
CSS+JS 实现表格隔行变色 鼠标移动变色
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
在描述中提到的效果是，当鼠标移动到表格上时，表格会变色。这涉及到jQuery的事件处理。`mouseenter` 和 `mouseleave` 是两个与鼠标相关的事件，分别在鼠标进入和离开元素时触发。我们可以为这些事件绑定函数，以...
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
综上所述，“鼠标移动变色代码”巧妙地结合了HTML、CSS和JavaScript，实现了鼠标悬停时的动态色彩变换，增强了网页的互动性和美观度。开发者应熟悉这三种技术的基本语法和交互机制，以便在实际项目中灵活运用此类...
本教程将详细讲解如何通过JavaScript实现表格行在鼠标移动、选中复选框时的变色效果。 首先，我们需要一个包含表格数据的HTML文件，例如`test2l.html`。在这个文件中，我们将创建一个带有复选框的表格。基本的HTML...
在“PB数据窗口鼠标移动字体变色”这个主题中，我们关注的是如何实现在用户鼠标移动到数据窗口某一行时，该行的字体颜色发生改变，以提供视觉反馈和增强用户体验。下面我们将深入探讨这一功能的实现原理和步骤。 1....
标题“鼠标滑过变色”通常指的是网页设计中的一种交互效果，当用户将鼠标光标悬停在某个元素上时，该元素的颜色或样式会发生变化。这种效果在导航菜单、按钮或其他可点击元素中非常常见，能提升用户体验，提供视觉...
在上述例子中，我们看到了如何通过自定义装饰器 `OverOutWrapper` 实现鼠标经过表格行变色的功能。这个装饰器继承自Displaytag 提供的 `TableDecorator` 类，并重写了 `addRowId()` 方法。`addRowId()` 方法通常用于...
为了提高用户的阅读体验，有时候我们需要对表格进行美化，例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先，让我们了解一下JavaScript在网页中的作用。...
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下 表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 <!DOCTYPE ...
综上所述，实现"jquery table鼠标滑过隔行变色表格样式代码"涉及到HTML表格布局、CSS样式设计、jQuery选择器与事件处理等多方面知识。通过合理运用这些技术，我们可以创建出更具有吸引力和易用性的数据展示界面。在...
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
然而，为了提高可读性和用户体验，设计师经常需要对表格进行美化处理，比如隔行换色和鼠标经过变色。这些效果在不同的浏览器中可能表现不一致，尤其是对于老旧的IE浏览器（如IE6和IE7）和Firefox（FF）。下面我们将...