鼠标移动改变颜色

最新推荐文章于 2024-01-10 11:12:27 发布

原创最新推荐文章于 2024-01-10 11:12:27 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格美化方法，通过鼠标悬停改变行背景色，并在移开鼠标后根据行号自动切换两种预设颜色，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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='disc_list';  //表格的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);

在这里插入图片描述