javascript实现表单隔行变色

<table border="1" cellpadding="10px" rules="all">
            <thead>
                <tr>
                    <th>one</th>
                    <th>two</th>
                    <th>three</th>
                    <th>four</th>
                </tr>
            </thead>
            <tbody>
 
                <tr>
                    <td>第一行</td>
                    <td>第一行</td>
                    <td>第一行</td>
                    <td>第一行</td>
                </tr>
                <tr>
                    <td>第二行</td>
                    <td>第二行</td>
                    <td>第二行</td>
                    <td>第二行</td>
                </tr>
                <tr>
                    <td>第三行</td>
                    <td>第三行</td>
                    <td>第三行</td>
                    <td>第三行</td>
                </tr>
                <tr>
                    <td>第四行</td>
                    <td>第四行</td>
                    <td>第四行</td>
                    <td>第四行</td>
                </tr>
                <tr>
                    <td>第五行</td>
                    <td>第五行</td>
                    <td>第五行</td>
                    <td>第五行</td>
                </tr>
            </tbody>
</table>

<style>
            .bg {
                background-color: pink;
            }
</style>

//获取元素
// 获取tbody里面的所有的行
        var trs = document.querySelector("tbody").querySelectorAll("tr");
 
        //鼠标经过时间
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function() {
                this.className = 'bg'
            }
            //鼠标离开事件
            trs[i].onmouseout=function(){
                this.className='';
            }
        }