分享之...
---------------------
HTML:
<!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>
.datalist{
border:1px solid #0058a3;
font-family:Arial;
border-collapse:collapse;
background-color:#eaf5ff;
font-size: 14px;
}
.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">
<tr>
<th>Name</th>
<th>Class</th>
<th>Birthday</th>
<th>Address</th>
<th>Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
</table>
<script type="text/javascript">
var rows = document.getElementsByTagName("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>
- 大小: 75.3 KB
分享到：
相关推荐
当一个报表很长的时候可以固定表头，上下滑动的时候，让表头悬浮的。
6.2 CSS控制表格的颜色交替 155 6.3 CSS控制表格边框 156 6.4 制作圆角框 157 6.5 小结 159 第7章 表单样式设计 160 7.1 表单样式设计 161 7.1.1 表单透明化 161 7.1.2 增加表单中的空隙 162 7.2 表单元素样式设计 ...
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定...在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏...
orbitz-like behavior for hovering over table cells .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} ...
table 列可左右拖动，随着内容增多，会出现横拉条，兼容谷歌核心和IE8以上浏览器。
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...
9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选...
9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选...
8.7.htm 网页中禁止鼠标右键的操作 第9章（/C09/） 9.1.htm 实现了在网页上显示当前时间的功能 9.2.htm 一个显示当前日期和星期的完整示例 9.3.htm 同时显示日期、时间和星期 ...
基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果： 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序...
188 6.11 按页显示图片 193 6.12 在任意两个方向上切换图片 196 6.13 编写钟摆式滚动器 199 6.14 使用数组来滚动图片 202 6.15 小结 205 第7章 处理表格 206 7.1 在鼠标悬停时突出显示行 206 7.2 交替突出显示相邻列...
1.5 页面的滑动隐藏 1.6 切换页面的滑动 1.7 图片的动画效果 1.8 停止动画效果 1.9 不可不知的Callback回调 1.10 提高效率的链式（Chaining）操作 1.11 在新窗口中打开链接 1.12 强制在弹出窗口中打开链接 1.13 平滑...
今天一下午的学习成果，分享一下，欢迎高手指教。 首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。 复制代码代码如下: <...
基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果：手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序...
基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果： 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序...
手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序(table sorters)、页签(tabs) 放大镜效果(magnifier)、阴影效果(shadow) 第一部分：鼠标交互 1.1 Draggables...
8．5．5 更改表格间隔背景色 第9章 JavaScript中的XML 9．1 XML语言 9．1．1 XML概述 9．1．2 XML文档结构 9．1．3 XML标记 9．1．4 XML文档元素 9．1．5 XML属性 9．1．6 XML命名空间 9．2 XMLDOM 9．2．1 通用...
富文本编辑器(Kindeditor):重做了表格编辑功能，包含如下关键特性:重做了工具栏图标，优化了插入表格交互体验，现在点击表格图标按钮，弹出行列选择面板，滑动鼠标选择要插入的表格行数和列数即可实现表格快速插入，...
8.5.5 更改表格间隔背景色 219 第9章 JavaScript中的XML 223 9.1 XML语言 223 9.1.1 XML概述 223 9.1.2 XML文档结构 225 9.1.3 XML标记 226 9.1.4 XML文档元素 226 9.1.5 XML属性 229 9.1.6 XML命名空间 230 9.2 XML...