实现表格行高亮的2种方法

表格行高亮,就是当我我们把鼠标放到表格上时,所在行背景颜色自动改变,现在分别用纯css和js来实现

首先,写一个表格,给他一个id:tab

实现表格行高亮的2种方法_第1张图片

第一种纯CSS实现,推荐,

 #tab tr:not(:first-child):focust-whithin{
        background: rgba(173, 216, 230, 0.4);
    }
    #tab tr:not(:first-child):hover{
        background: rgba(173, 216, 230, 0.4);
    }

第二种,js实现

s("tab").onmouseover=function(){
    var oldColor="";
    var trover=function(){//每行保存旧颜色,变为新颜色
        oldColor= this.style.backgroundColor;
        this.style.backgroundColor="rgba(173, 216, 230, 0.6)";
    };
    let trs=s("tab").rows;
    for(let i=1;i

 

你可能感兴趣的:(学习笔记)