JavaScript基础学习 表单隔行变色

    
    
    
    Document
    
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    





    
        
            
                代码
                名称
                最新公布值
                累计净值
                前单位净值
                净值增长率
            
        
        
            
                003526 
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
            
                003526 
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
            
                003526 
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
            
                003526 
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
        
    
    
        // 获取 tbody当中所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        console.log(trs.length);
        for (var i = 0; i < trs.length; i++) {
            // 鼠标经过事件onmouseover时会产生效果
            trs[i].onmouseover = function() {
                    this.className = 'bg';
                }
                // 鼠标离开事件onmouseout会产生效果
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }