隔行换色，鼠标滑过行变色 [转载]
2009-04-18 13:55 Virus-BeautyCode 阅读(885) 评论(0) 编辑 收藏 举报本来css2的hover挺好的，可以用在任务标记上了，可是ie6还是支持css1，css1中hover只能用在a标记上面，只好想办法解决了，无非就是用javascript解决了，下面是从网站找到的一段javascript，
前几天由于工作需要,要对一个表格进行隔行换色,还要加上鼠标经过效果,但是表格由程序生成,如果在tr标签中添加onmouseover,onmouseout效果的话工作量很大,遂尝试用js实现以上功能,唯一要对表格做的改动就是给table标签加上id.
从网上搜索了很多方法,几乎都是对tr标签进行修改,还好找到了一个完全通过js实现隔行换色的(经过转载已无法考证作者),不过不支持鼠标经过变色,经过我的修改现在已经支持鼠标经过变色了.
这段代码体现了web重构的思想,实现了结构与表现分离.
请看效果:
提示：您可以先修改部分代码再运行
1.给你的table加上一个id.这个例子中我加的id是table.
2.将以下代码插入到head区中,按照注释修改颜色和id.
复制内容到剪贴板
3.enjoy it.代码:
<style language="text/css">
/*第一种颜色*/
#table tr.color1{
background-color:#FFFFFF;
}
/*第二种颜色*/
#table tr.color2{
background-color:#F8F8F8;
}
</style>
<script type="text/javascript">
<!--
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tableid='table'; //表格的id
var overcolor='#FCF9D8'; //鼠标经过颜色
var color1='#FFFFFF'; //第一种颜色
var color2='#F8F8F8'; //第二种颜色
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for(var i=1 ;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1";
}else{
tr[i].className="color2";
}
}
}
onloadEvent(showtable);
-->
</script>感谢原作者,也谢谢你用一点点时间看完了我这个帖子.希望这段代码能给你带来方便.
