效果演示

对于网页中的一个表格，我们希望实现以下效果：（鼠标悬浮时该单元格所在行的背景颜色变为黄色，字体颜色变为红色，鼠标离开时，恢复原来的颜色）

这里就要使用到JavaScript的函数

代码实现

HTML代码

    
    

    


    

        

            

                

                    
名称
                    
单价
                    
数量
                    
小计
                    
操作
                
                

                    
苹果
                    
5
                    
20
                    
100
                    

                
                

                    
菠萝
                    
3
                    
20
                    
100
                    

                
                

                    
香蕉
                    
25
                    
20
                    
200
                    

                
                

                    
总计
                    
181
                
            
        
    

css代码

    
        
        
        
        
    
    
    
CSS初识
        
段落1
        
段落2
        
段落3

        

        
    

JavaScript代码

    
        
        
        
        
    
    
    
CSS初识
        
段落1
        
段落2
        
段落3

        

        
    

文件目录结构

HTML代码中不要出现JS代码，因此需要改写以上代码

改写后的代码如下：

改写后HTML代码

    
    

    


    

        

            

                

                    
名称
                    
单价
                    
数量
                    
小计
                    
操作
                
                

                    
苹果
                    
5
                    
20
                    
100
                    

                
                

                    
菠萝
                    
3
                    
20
                    
100
                    

                
                

                    
香蕉
                    
25
                    
20
                    
200
                    

                
                

                    
总计
                    
181
                
            
        
    

改写后JS代码

//当前窗口
window.onload=function (){
    //当页面加载完成，绑定各种事件
        //获取对ID标签属性为指定值的第一个对象的引用
    var fruitTb1 = document.getElementById(`tb1_fruit`);
        //获取来自于table对象的tr对象的集合
    var rows = fruitTb1.rows;



    for (var i = 0; i < rows.length; i++) {
        var tr = rows[i];
        //1.绑定鼠标悬浮设置背景颜色事件,离开后背景颜色恢复的事件
        tr.onmouseover = showBGColor;
        tr.onmouseout = clearBGColor;
        //2.获取tr这一行的所有单元格
        var cells = tr.cells;
        var priceID = cells[i];
        //3.绑定鼠标悬浮在单价单元格变手势的事件
        priceID.onmouseover = showHand;
    }

}

function showHand() {
    if(event && event.srcElement && event.srcElement.tagName === "TD"){
        var td = event.srcElement;
        td.style.cursor = "hand";
    }
}

//当鼠标悬浮时显示背景颜色
function showBGColor() {
    //event:表示当前发生的事件;
    //srcElement:事件源
    //alert(event.srcElement);
    //alert(event.srcElement.tagName);
    if(event && event.srcElement && event.srcElement.tagName === "TD"){
        var td = event.srcElement;
        var tr = td.parentElement;
        tr.style.backgroundColor = "yellow"
        //获取tr中的所有单元格
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color="red"
        }
    }
}

function clearBGColor() {
    if(event && event.srcElement && event.srcElement.tagName === "TD"){
        var td = event.srcElement;
        var tr = td.parentElement;
        tr.style.backgroundColor = "transparent";
        var tds = tr.cells;
        for(var i = 0;i < tds.length;i++){
            tds[i].style.color = "darkgray";
        }
    }
}

搜索

复制