js实现表格鼠标经过行变色 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现表格鼠标经过行变色</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>sex</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>zhangsan</td>
                <td>34</td>
                <td>men</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>34</td>
                <td>men</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>34</td>
                <td>men</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>34</td>
                <td>men</td>
            </tr>
        </tbody>
    </table>
    <style>
        .bg{
            background-color: blueviolet;
        }
    </style>
   <script>
    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='';
        }
    }
</script>
</body>
</html>

 

posted on 2021-04-03 16:36  达摩克利斯  阅读(289)  评论(0)    收藏  举报

导航