利用js实现鼠标移动到目标行进行颜色调整

Fᴏʀɢᴇᴛ232

于 2023-08-26 11:05:53 发布

阅读量933

点赞数

文章标签： javascript 计算机外设开发语言

本文链接：https://blog.csdn.net/a000515/article/details/132509312

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function changeColor(id, flag) {
            if (flag == 'over') {
                document.getElementById(id).style.backgroundColor = 'skyblue'
            } else if (flag = 'out') {
                document.getElementById(id).style.backgroundColor = 'white'

            }
        }
    </script>
</head>

<body>
    <table border="1" width="500" height="50" align="center" id="td1">
        <tr onmousemove="changeColor('tr1','over')" onmouseout="changeColor('tr1','out')" id="tr1">
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr onmousemove="changeColor('tr2','over')" onmouseout="changeColor('tr2','out')" id="tr2">
            <td>1</td>
            <td>张三</td>
            <td>22</td>
        </tr>
        <tr onmousemove="changeColor('tr3','over')" onmouseout="changeColor('tr3','out')" id="tr3">
            <td>2</td>
            <td>李四</td>
            <td>25</td>
        </tr>
        <tr onmousemove="changeColor('tr4','over')" onmouseout="changeColor('tr4','out')" id="tr4">
            <td>3</td>
            <td>王五</td>
            <td>27</td>
        </tr>
        <tr onmousemove="changeColor('tr5','over')" onmouseout="changeColor('tr5','out')" id="tr5">
            <td>4</td>
            <td>赵六</td>
            <td>29</td>
        </tr>
        <tr onmousemove="changeColor('tr6','over')" onmouseout="changeColor('tr6','out')" id="tr6">
            <td>5</td>
            <td>田七</td>
            <td>30</td>
        </tr>
        <tr onmousemove="changeColor('tr7','over')" onmouseout="changeColor('tr7','out')" id="tr7">
            <td>6</td>
            <td>汾九</td>
            <td>20</td>
        </tr>
    </table>
</body>

</html>