zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    153. Find Minimum in Rotated Sorted Array
    228. Summary Ranges
    665. Non-decreasing Array
    661. Image Smoother
    643. Maximum Average Subarray I
    4.7作业
    面向对象编程
    常用模块3
    3.31作业
    常用模块2
  • 原文地址:https://www.cnblogs.com/yanweichen/p/14614182.html
Copyright © 2011-2022 走看看