<!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>
</head>
<body>
<style>
*{border:none;}
table{width:100%;border:1px solid silver;margin-bottom:30px;background:#F7F7F7}
</style>
<table id="tb1">
<tr ><td> </td></tr>
<tr ><td> </td></tr>
<tr ><td> </td></tr>
<tr ><td>点一下我</td></tr>
<tr ><td>点一下我</td></tr>
<tr ><td>点一下我</td></tr>
</table>
<table id="tb2">
<tr ><td> </td></tr>
<tr ><td> </td></tr>
<tr ><td> </td></tr>
<tr ><td> </td></tr>
<tr ><td> </td></tr>
<tr ><td> </td></tr>
</table>
<script>
//代码如下
var G = function(id){return document.getElementById(id)}
var EACH = function(o,fn){for(var i=0;i<o.length;i++){fn.call(o[i],i,o); if(i==o.length-1) return o}}
var _2009_ = function(){this.init.apply(this,arguments)};
_2009_.prototype={
init:function(o){
EACH(G(o.id).rows,function(i,O){
var d=false;
i%2== +!!o.parity ? this.style.background = o.cor1:'';
this['color2'] = this['color'] = this.style.background;
this.onmouseover = function(){this.style.background = o.cor2}
this.onclick = function(){d?(this.style.background = this['color2'] = this['color'],d=false):(this.style.background = this['color2'] = o.cor3,d=true);}
this.onmouseout = function(){this.style.background = this['color2']}
})
}
};
//用法如下.可设定奇偶.
new _2009_({id:'tb1',cor1:'#DDDDE4',cor2:'#BAD0FC',cor3:'#FFFF99'});
new _2009_({id:'tb2',cor1:'#DDDDE4',cor2:'#BAD0FC',cor3:'#FFFF99',parity:'默认是奇数,设了就是偶数'});
</script>
</body>
</html>
分享到:
相关推荐
超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff)
实现效果为:表格隔行换色 鼠标移过变色 实现多选效果
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
js表格特效制作js表格变色效果,表格隔行变色,鼠标滑过显示单行变色效果,点击选中变色。内含js代码下载
CSS+JS 实现表格隔行变色 鼠标移动变色
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...
当鼠标点到那一行时哪一行就会变色 很漂亮 实用
隔行换色鼠标指向表格行变色(含页面内容查找功能)、jQuery UI插件(gridster)
javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx
js代码: css代码: 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
时间表格的隔行变色,以及鼠标移动到某行 高亮的效果
主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
表格隔行变色功能的实现(当鼠标经过当前行变颜色,当鼠标离开当前行变颜色,利用鼠标经过和离开事件完成)!!!
表格隔行变色,也是一个提高用户体验的js效果。 效果实现: 表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。 鼠标移入某行时变颜色,移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。 表格点击...
主要介绍了jQuery实现表格隔行及滑动,点击时变色的方法,可实现表格隔行变色以及鼠标滑过与点击时变色的功能,涉及jQuery响应鼠标事件及页面元素样式动态改变的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果。分享给大家供大家参考,具体如下: 最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录。 前台代码: <!DOCTYPE ...